这是我参与「第四届青训营 」笔记创作活动的第8天
浏览器开发工具
Chromium内核的浏览器 一般F12即可打开
元素
我们在页面中选中特定的元素，就可以动态的修改元素的内容和样式-实时可见
控制台
跟本地ide终端一个意思 可以执行命令
真机调试
Chrome浏览器 在手机和电脑上同时打开 即可使用(数据线连接)(我用这个的场景一般是Mirai登录qqbot)
代理调试
HTTP代理 电脑做代理 手机连接
Node.js调试
VSC/Chrome即可 特别简单
Sources
-
在程序中输入
debugger可以在代码运行到对应的位置暂停 -
在代码预览区对应的行数旁点一下可以添加断点，跟
debugger行为一样 -
在调试器中
Watch右侧点击+添加变量，查看对应变量 -
DOM breakpoint，XHR/fetch breakpoint第一个是给DOM添加断点，后者是有请求发生的时候会触发断点 -
Scope可以看到对应代码的作用域，CallStack是查看当前代码的执行栈 -
Sourcemap映射了压缩后的代码对应的源文件，sourcemap文件和源文件只会上传到监控平台，真正上线只会上线源文件
NetWork
从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间、Request和Response等） 用来做网络优化是不错的
Performance
这里可以查看各个任务所花费的时间，以及不同的任务所调用的线程、绘制是所使用的层等
另附控制台输出日志
- 普通打印：
console.log - 效果同普通打印：
console.debug、console.info - 警告打印：
console.warn - 错误打印：
console.error - 将数据以表格形式展示：
console.table - 打印节点树形结构：
console.dir
