「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

前端应用的领域

• To Business，表现为一个为企业提供许多种类的服务的网站，规模庞大业务广泛的一个领域。
• To Customer，直接触达客户的网站，包括电商平台、在线教育、手机端的H5等等，都是ToC的应用。
• To Developer，提高Web开发效率的工具，比如VS Code等代码编辑器。

前端语言、框架、工具

• 前端语言：

  • 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: World Wide Web Consortium
• ECMA: Ecma International
• WHATWG: Web Hypertext Application
• IETF: Internet Engineering Task Force

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 规范制定流程：

如何参与

• 关注会议
  • W3C 会议
    • 年度大会：Advisory Committee、Technical Plenary and Advisory Committee
    • 工作组会议：每月会议、各种研讨会
  • ECMA 会议
    • General Assembly 年度大会
    • TC39 会议

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

前端 Debug 的特点

• 多平台
  浏览器、Hybrid、NodeJs、小程序、桌面应用…
• 多环境
  本地开发环境、线上环境…
• 多工具
  Chrome devTools、Charles、vConsole…
• 多技巧
  Console、BreakPoint、sourceMap、代理…

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

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