「Web标准与前端开发」和「前端必须知道的开发调试知识」笔记前端

前端开发与 Web 标准关于前端开发前端开发的起源、架构、变迁

Web 自1989年诞生时由三种技术构成：HTML、HTTP、URL。CSS 和 JavaScript 是过几年后才出现的。
Web 的架构和变迁：
- 只读时代（1989-2005）：HTML/CSS/JavaScript
- 体验时代（2005-2010）：Ajax/Web API/jQuery
- 敏捷时代（2010-至今）：Fetch/NodeJs/Webpack

前端应用的领域

前端语言、框架、工具

前端语言：
- HTML -> Structural
- CSS -> Presentational
- JavaScript -> Behavioral
- WebAssembly 现在也可以在浏览器中运行
常见前端框架
- NodeJs —— Ryan Dahl
- Babel —— Sebastian McKenzie
- Webpack —— Tobias Koppers
- Koa —— TJ Holowaychuk
- React —— Facebook
- Vue —— 尤雨溪
前端开发
- 浏览器，推荐阅读 深入理解现代浏览器
- 网络，推荐阅读 An overview of HTTP
- 了解学习服务器端开发

前端学习路线图
前端学习路线图 Frontend Developer Roadmap
关于 Web 标准了解 Web 标准组织

W3C与 ECMA

W3C标准
- 官网：https://www.w3.org
- GitHub：https://github.com/w3c
- 规范查询：https://www.w3.org/TR
Ecma TC39
- 官网：https://www.ecma-international.org
- TC39：https://tc39.es
- GitHub：https://github.com/tc39

W3C流程
W3C规范制定流程：

文章图片

TC39 流程
ECMA TC39 规范制定流程：

文章图片

如何参与

前端必须知道的开发调试知识前端 Debug 的特点

chrome devTools 在浏览器界面中右键“检查”或按F12打开，了解各个板块的作用。

Elements 可以用于修改添加元素和样式等
Console 控制台可以用于打印日志和 debug等
Sources
- 可以用于查看页面资源文件、预览代码、各种断点调试和debug等
- 前端代码天生具有"开源"属性，出于安全考虑，JavaScript 代码通常会被压缩，压缩后的代码只有一行，会变得不可阅读。为了解决这个问题，监控平台存储SourceMap，利用SourceMap映射源代码，调试时可以定位到源代码的地方。为了安全，当项目上线到服务器后再将souceMap删除
Performance 用于性能分析等
Network 统计和分析网络请求信息和状态、选择网速等
Application 展示与本地存储相关的信息：Local Storage、Session Storage、IndexedDB、Web SQL、Cookie

移动端 H5 调试

真机调试，使用手机扫码或使用数据线连接电脑进行调试
代理调试，常用工具：
- Charles: 适合查看、控制网络请求，分析数据
- Fiddler: 与 Charles 类似，适合 Windows 平台
- Whistle: 基于 Node 实现的跨平台 Web 调试代理工具

常用开发调试技巧

线上即时修改 Overrides
- 打开Sources面板下的的Overrides
- 点击Select folders for Overrides.选择一个本地的空文件夹目录
- 允许授权
- 在page中修改代码，修改完成后保存
- 打开devTools，点击右上角的三个小点-> More tools -> Changes，就能看到所有修改了
利用代理解决开发阶段的跨域问题
- 利用代理服务器转接，解决跨域。客户端向代理发送一个请求并指定目标，然后代理向目标服务器转交请求并将获得的内容返回给客户端
- 反代理技术。以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器为反向代理服务器
启用本地 source map
- 线上不存在Source Map时可以使用Map Local网络映射功能来访问本地的Source Map文件
小黄鸭调试大法（doge

传说中程序大师随身携带一只小黄鸭，在调试代码的时候会在桌上放上这只小黄鸭，然后详细地向鸭子解释每行代码，然后很快就将问题定位修复了。 ——《程序员修炼之道》