系统网站设计,360免费建站官网入口,多米诺网站建设,小程序制作流程及合同大家好#xff0c;我是若川。我们日常开发碰到的很多问题#xff0c;通过 debugger 都能快速定位问题#xff0c;所以推荐这篇大家容易忽略的调试技巧。会定位问题#xff0c;可以节省很多时间。也就是我经常说的工欲善其事#xff0c;必先利其器。也是为什么我经常强调调… 大家好我是若川。我们日常开发碰到的很多问题通过 debugger 都能快速定位问题所以推荐这篇大家容易忽略的调试技巧。会定位问题可以节省很多时间。也就是我经常说的工欲善其事必先利其器。也是为什么我经常强调调试的原因之一。点击下方卡片关注我、加个星标学习源码整体架构系列、年度总结、JS基础系列本文结构 - 系列文相关 - Sources面板概览 - 七种断点类型 - Debug - Devtools Nodejs Debug - Blackbox - WorkspaceDvtools as IDE 将更改持久化 - Source Map - Local Overrides - Snippets 代码片段 - Content Scripts本文共计2413字20图预计阅读时间8min20s系列文相关系列文请点击上方Devtools老师傅养成系列专辑本文基于 chrome 浏览器版本 73.0.3683.103正式版本总结本文目的关于【devtools 能做什么】建立完善的知识结构至于怎么做请查阅官方文档工具类知识需要实践建议阅读本文时打开 sample[1]和 devtools 操作一遍参考 1google developers 官方文档[2]参考 2来自作者 Jon Kuoerman 在 FrontEndMaster 的 Mastering Chrome Developer Tools v2 课程[3]参考 3来自 作者 Tomek Sułkowski 在 medium 的系列文章[4]Devtools脑图.png[5]Sources面板概览Debug : 在源代码面板中可以设置断点来调试 JavaScript 比 console.log()调试更快速高效Devtools as IDE : 通过 Workspaces工作区连接本地文件来使用开发者工具的实时编辑器七种断点类型行断点代码运行到当前行之前暂停执行在源代码添加debugger关键字或者点击Sources面板中的源代码的行号条件行断点当满足条件时才会触发该断点右击Sources面板中的源代码的行号选择“Add conditional breakpoint”DOM 断点:即Elements面板提及过的三种DOM断点节点属性断点节点删除断点子树变更断点XHR/Fetch 断点在页面发出XHR或Fetch请求前加断点Event Listener 事件监听断点可以在所有类型的事件函数被出发前加断点Exception 异常断点 7. Function 函数断点把想调试的函数名作为参数调用debug()函数可以在每次执行该函数前暂停执行代码Debug函数调用栈 Call StackCall Stack 是 time traveling 的即点击栈中的任一节点当前的作用域和局部变量等信息都会模拟至该节点执行时的状态全局作用域 Global 局部作用域 Local 闭包作用域 Closurestep over next functionstep into next functionstep out current functionstep (与 step over/into 的区别就是step 会优先尝试 step into当没有可步入的代码时就会执行 step over)long resume恢复执行并将断点停用 500msContinue to here继续执行至此行Restart Frame重新执行函数调用堆栈中的某一帧行断点内的多个箭头行内断点行内的可 step into 的 执行点Devtools Nodejs debugnode 执行 js 文件文件名前加--inspect 标志启用浏览器 nodejs 调试node调试点击 devtools 中左上角的 devices mode 右侧的绿色按钮即可启用 node 服务端中的脚本调试更多相关[6]BlackBoxBlackBox 的用途“BlackBox Script”可以在调试中忽略某些脚本(此处的 BlackBox 为动词)在 Call Stack 堆栈中会将该脚本隐藏单步调试时也不会步入脚本中的任何函数function animate() {
prepare();
lib.doFancyStuff(); // A
render();
}
例如以上代码的 A 行调用的是第三方库的 doFancyStuff 函数如果我确认该第三方库没有 bug就可以 BlackBox 整个第三方库的 js 脚本在调试中跳过这些代码的执行三种添加 BlackBox 的方法 1. 在源代码窗格右键选择BlackBox Script 2. 在 Call Stack 中右键某一帧选择BlackBox Script 3. 在设置中的 Blackboxing 面板添加正则表达式匹配文件名WorkspaceDevtools as IDE 将更改持久化在 sources 左侧的面板中选择Filesystem点击Add folder to workspace将你本地运行的站点的相关源文件添加到 Devtools 的工作区会自动识别 Page 下和工作区下相对应的文件在 devtools 更改文件并保存即持久化保存目前只支持自动识别不支持添加映射绿标文件成功的映射到本地的文件在 Styles 和 Sources 中的文件名前都会添加绿色圆点作为标识目前 Devtools 已经支持 sass/scss、UglifyJS、Grunt、Coffescript、Closure 等等暂时还不支持 webpack和其他现代的复杂框架如 react所有sources面板的文件都可以右键选择local modifications查看所有更改对 DOM 树的更改不会持久化至 html 文件因为 dom 的最终表现受到 html、css、javascript 的共同影响DOM 树 ! HTML因此可以在 sources 中直接更改 html 文件并保存Source Map组合/压缩 css,js 文件是常见的性能优化方案但是会对开发调试造成困扰Source Map 用于将生产代码映射至源代码Chrome 和 firefox 都内置了对 Source Map 的支持在 Chorme devtools 中settings - preference - sources 中选中Enable Javascript source maps和Enable CSS source mapssource map 映射信息存在 json 对象中保存在 .map 文件中可以由编译程序添加注释//# sourceMappingURL/path/to/script.js.map至生产文件末尾也可以由服务端在响应头中添加X-SourceMap: /path/to/script.js.map将 map 文件与生产文件对应。更多关于 source map 的介绍[7]Local Overrides用于覆盖网络请求: 在source/page右键save for override或直接edit保存的文件都被存储到overrides 指定目录(按照域名建立文件夹). 这种改写是临时的在 Sources 面板左侧选择 Overrides指定 DevTools 应保存更改的目录当在 DevTools 中进行更改时DevTools 会将修改后的文件的副本保存到所选的本地目录中重新加载页面时DevTools 提供本地修改的文件而不是请求的网络资源。与 Workspace 相似的不支持保存对 DOM 树的更改需要直接更改 html 源文件。只能指定一个目录断点debug 时实时修改文件然后保存后会恢复到第一个断点不用重新刷新Snippets 代码片段在 Sources 面板左侧选择 Snippets或ctrl shift p输入 snippet 打开 Snippets 面板可以创建并保存常用的代码片段和用 gist 类似snippets 中选中代码并ctrl enter或点击右下角的执行按钮即可执行代码片段代码片段Content scripts这部分脚本是浏览器插件的脚本在特定网页的上下文中运行。与插件运行在服务端的脚本页面上引用的脚本页面上 script 中的内嵌脚本都不同插件在服务端的脚本可以访问所有 WebExtension JavaScript API但它们无法直接访问网页内容。Content scripts 只能访问 WebExtension API 的一小部分但它们可以使用消息传递系统与后台脚本进行通信从而间接访问 WebExtension API。如果有浏览器插件相关的工作可以更深入研究[8]不赘述。参考资料[1]sample: https://masteringdevtools.com/[2]google developers 官方文档: https://developers.google.com/web/tools/chrome-devtools/[3]Mastering Chrome Developer Tools v2 课程: https://frontendmasters.com/courses/chrome-dev-tools-v2[4]系列文章: https://medium.com/tomsu[5]Devtools脑图.png: https://i.loli.net/2019/04/19/5cb95639a9f73.png[6]更多相关: https://nodejs.org/en/docs/guides/debugging-getting-started/[7]更多关于 source map 的介绍: https://blog.teamtreehouse.com/introduction-source-maps[8]研究插件: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions- END - 相关文章 Devtools 老师傅养成[1] - Chrome Devtools介绍 Devtools 老师傅养成[2] - Elements 面板 Devtools 老师傅养成[3] - Console 面板最近组建了一个江西人的前端交流群如果你是江西人可以加我微信 ruochuan12 拉你进群。今日话题虽然公众号关注突破一万了但阅读量还是很低。我的目标就是让公众号活下来。而活下来的需要解决问题提供价值。一个公司没有收入来源目测不久就倒了。一个开源项目没有了收入来源或者其他正反馈也是如此。同理可得一个公众号也是如此。换种思路可以这样理解:一个公司不能解决问题提供价值就很难有收入来源。一个开源项目不能解决问题提供价值就很难有收入来源。同理可得一个公众号也是如此。欢迎分享、收藏、点赞、在看我的公众号文章~一个愿景是帮助5年内前端人走向前列的公众号可加我个人微信 ruochuan12长期交流学习推荐阅读我在阿里招前端我该怎么帮你可进模拟面试群2年前端经验做的项目没技术含量怎么办点击上方卡片关注我、加个星标················· 若川简介 ·················你好我是若川毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》多篇在知乎、掘金收获超百万阅读。从2014年起每年都会写一篇年度总结已经写了7篇点击查看年度总结。同时活跃在知乎若川掘金若川。致力于分享前端开发经验愿景帮助5年内前端人走向前列。
