11.精读前端调试技巧.md

011.精读前端调试技巧.md

编码只是开发中的其中一部分，为了高效进行开发，必须学会并且善于调试

常用调试技巧

• debugger;直接代码打断点 暂停代码执行 看栈堆调试

• Console.dir() 打印对象结构

• 使用辅助工具， 语法高亮，linting (flow && TS)

• 浏览器拓展， 如 VueDevTools ReactTools 等

• Chrome Dev Tools，未知调试一百多项

• 移动端调试工具(eruda) 可内嵌任何 H5，充当 DevTools 控制台的作用

• 实时调试： 不需要预先埋点，(document.activeElement) 可打印最近 focus 的元素

• 结构化打印对象瞬时状态 JSON.stringify(obj, null, 2) 可结构化打印对象, 字符串打印，不会有对象的引用关联问题

• 数组调试 Array.prototype.find 快速寻找某个元素

深入

• 移动端真机测试平台(browserstack dynatrace 等真机测试平台，不同公司搭建不同平台)

• 移动端控制台 Chrome 远程调试 app、Vconsole、webview 调试，Rosin fiddler 插件协助移动页面调试、jsconsole 本地部署，手机访问对应 IP 测试对应浏览器控制台

• 请求代理 Charles、Fiddler 抓包，可以代理请求、假数据、边界值测试、开发环境代码加载

• 定制 Chrome 拓展

• 用户设备调试 控制台输出信息打服务器，本地通过与服务器 socket 连接实时查看控制台信息，根据用户 id 开启调试信息

• DOM 断点，事件断点 Event Listener Breakpoints

• 使用错误追踪平台 sentry、trackjs

• 黑盒调试，利用 SourceMap 精确定位

• 删除无用的 css Chrome 的 CSS Tracker 分析规则冗余 CSS

• Chrome 快速查找元素

• Console.table 对于打印表格形式数据良好支持

• 监听特定函数调用 monitor(function)，浏览器内置

• 模拟发送请求 PostMan

• 查找控制台最后一个对象$_

summary

• 调试技巧繁多，包含通用和不通用的，还有很多技巧，能利用上部分对工作肯定十分高效