1 前言
其实我是会前端的，之前某个公司的ajax框架就是我搭的。只是觉得这块太简单，后面就去做嵌入式了。。。
不过现在好像web前端在业界越来越重，就连硬件也和web搭上关系。。比如webusb。并且现在工作也又要弄一下这个，好吧，还是简单总结一下。首先还是那句话，工欲善其事必先利其器，先还是看看调试工具。
一般前端用的工具就是谷歌浏览奇Chrome。正式名称是DevTools，打开网页的时候用F12就可以启动。大概是这样的。
这里用的例子是上一篇3js的例子：https://blog.csdn.net/fanged/article/details/157257946
2 核心面板
DevTools整体还是VSCode那种IDE的风格。刚刚提示能否切换成中文，好吧，我就直接切换了。
可以看到，有这么几个核心模块，元素，控制台，源代码，网络，性能，内存，应用。如下：
2.1 Elements（元素面板）
UI 修改与调试
这是最常用的面板，用于查看和实时修改页面的 HTML 和 CSS。
实时修改：双击 HTML 标签可以修改内容；在右侧 Styles 栏可以修改 CSS 属性。修改立即生效，但刷新页面后会重置。
取色器：点击 CSS 颜色方块可以调出调色板，直接在页面上拾取颜色。
盒子模型：在 Styles 底部可以看到元素的 Margin、Border、Padding 和 Content 尺寸。
基本上这一页UI用的比较多吧。
2.2 Console（控制台）
日志与脚本运行
查看错误：JavaScript 的报错、警告信息都会显示在这里。
执行 JS：你可以直接在这里输入 JavaScript 代码并回车运行（例如输入 alert('Hello')）。
常用快捷命令：
$0：引用当前在 Elements 面板选中的元素。
clear()：清空控制台。
console.table(data)：将数组或对象以表格形式精美输出。
这一页倒是没什么好说的。。。
2.3 Sources（源代码面板）
断点调试
断点 (Breakpoints)：在代码左侧行号点一下，程序运行到此处会暂停。你可以查看此时的变量值，并点击"单步执行"来查找逻辑错误。
Overrides：可以修改本地代码并持久化保存，即使刷新页面修改也不会消失。
2.4 Network（网络面板）
抓包与性能分析
查看请求：监控页面加载的所有资源（图片、脚本、接口数据）。
查看详情：点击某个请求，可以查看 Headers（请求头）、Payload（发送参数）和 Response（接口返回的数据内容）。
模拟慢速网络：在 No throttling 下拉框选择 Fast 3G 或 Slow 3G，测试网页在差网下的表现。
禁用缓存：勾选 Disable cache，确保每次刷新都是从服务器拉取最新代码。
主要是查看对外部获取的内容。
2.5 Application（应用面板）
存储查看
查看和清理 Cookies、LocalStorage、SessionStorage 等本地缓存数据。
2.6 其它
性能和内存主要用来调优，后面再看吧。。