这是我参与「第四届青训营 」笔记创作活动的第2天
前端调试的多平台特性：js的运行环境有多种，调试的方式有多种。
pc端浏览器调试
Chrome devTools
谷歌浏览器的开发者调试是一个功能强大的调试工具
（我这之前设置过中文）
-
元素：左边是对html代码的展示，右边是对选中的盒子的css展示，调试工具同时支持直接对代码进行增删减改动
右边栏的
- 样式：盒子的所有相关css 和盒子模型
- 计算样式：应用在盒子上的所有最终样式
-
控制台：js的控制台，展示打印输出内容，可以直接在其上面运行代码
打印api代码：
console.log、console.warn、console.error、console.debug、console.info 打印的提示等级
console.table 具像化的展示JSON和数组数据 将对象的数据以表格形式展现出来
console.dir 通过类似文件树的方式展示对象的属性，使用console.log打印dom元素只会打印对应的html代码字符串，console.dir可以直接打印dom对象所有属性，实用。
-
源代码
显示网页代码的源代码文件，调试debug
tip：webpack打包将使得代码无法可读，webpack的source map 将会生成源代码映射文件，使得在浏览器可读源代码，但是在上线中一般不使用。
看到这里我返回去我最近部署的项目，才发现有加入source map， 于是发现vue的打包命令配置配置参考 | Vue CLI productionSourceMap参数我没有设置false 赶紧修改后打包一遍部署，dist文件大小从9m缩小到4.4m （汗）
-
网络
显示所有网络通信，方便查看通信时间，通信内容（http请求，响应）
-
性能
录制(监控) 一段此浏览器运行此标签页整个过程各个线程的执行情况，个人理解：网页运行的性能参数可视化
-
应用
网站在此浏览器上储存的数据，cookie，localstorage，sessionstorage等
-
lighthouse
一个第三方对网页质量的评估/检测工具。
移动端 H5 调试
真机调试
这里讲的只是略过一下，后续有需求再尝试，我觉得可以用 Chrome devTools的移动端模拟器
vconsole
一个工具，项目加入后在移动端可出现类似Chrome devTools的工具
代理工具
原理:
- 电脑作为代理服务器
- 手机通过HTTP代理连接到电脑
- 手机上的请求都经过代理服务器
NodeJs 应用调试
Inspector Protocol+Chrome devTools
1.执行命令node --inspect=8888 index.js 2.chrome浏览器访问服务 3.点击绿色node图标打开node 调试面板 (在chrome:llinspect/#devices中配置network target) 4.在node 调试面板中使用断点调试
vscode自带调试工具
vscode菜单中的运行->启动调试
