前端容易忽略的 debugger 调试技巧

大家好，我是若川。我们日常开发碰到的很多问题，通过 debugger 都能快速定位问题，所以推荐这篇大家容易忽略的调试技巧。会定位问题，可以节省很多时间。也就是我经常说的工欲善其事，必先利其器。也是为什么我经常强调调试的原因之一。

点击下方卡片关注我、加个星标

学习源码整体架构系列、年度总结、JS基础系列

本文结构

    - 系列文相关

    - Sources面板概览

    - 七种断点类型

    - Debug

    - Devtools Nodejs Debug

    - Blackbox

    - Workspace：Dvtools as IDE 将更改持久化

    - Source Map

    - Local Overrides

    - Snippets 代码片段

    - Content Scripts

本文共计：2413字20图

预计阅读时间：8min20s

系列文相关

  • 系列文请点击上方Devtools老师傅养成系列专辑

  • 本文基于 chrome 浏览器版本 73.0.3683.103（正式版本）总结

  • 本文目的：关于【devtools 能做什么】建立完善的知识结构，至于怎么做，请查阅官方文档；工具类知识需要实践，建议阅读本文时打开 sample[1]和 devtools 操作一遍

  • 参考 1：google 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（工作区）连接本地文件来使用开发者工具的实时编辑器

七种断点类型

  1. 行断点：代码运行到当前行之前暂停执行

  • 在源代码添加debugger关键字

  • 或者点击Sources面板中的源代码的行号

  1. 条件行断点：当满足条件时才会触发该断点

  • 右击Sources面板中的源代码的行号

  • 选择“Add conditional breakpoint”

  1. DOM 断点:即Elements面板提及过的三种DOM断点：

  • 节点属性断点

  • 节点删除断点

  • 子树变更断点

  1. XHR/Fetch 断点

  • 在页面发出XHR或Fetch请求前加断点

  1. Event Listener 事件监听断点

  • 可以在所有类型的事件函数被出发前加断点

  1. Exception 异常断点


    7. Function 函数断点

  • 把想调试的函数名作为参数，调用debug()函数，可以在每次执行该函数前暂停执行代码

Debug

  • 函数调用栈 Call Stack：Call Stack 是 time traveling 的，即点击栈中的任一节点，当前的作用域和局部变量等信息，都会模拟至该节点执行时的状态

  • 全局作用域 Global ，局部作用域 Local ，闭包作用域 Closure

  • step over next function

  • step into next function

  • step out current function

  • step (与 step over/into 的区别就是，step 会优先尝试 step into，当没有可步入的代码时，就会执行 step over)

  • long resume：恢复执行，并将断点停用 500ms

  • Continue to here：继续执行至此行

  • Restart Frame：重新执行函数调用堆栈中的某一帧

  • 行断点内的多个箭头：行内断点（行内的，可 step into 的 执行点


Devtools Nodejs debug

  • node 执行 js 文件，文件名前加--inspect 标志，启用浏览器 nodejs 调试

node调试

  • 点击 devtools 中，左上角的 devices mode 右侧的绿色按钮，即可启用 node 服务端中的脚本调试

  • 更多相关[6]

BlackBox

  • BlackBox 的用途：

“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 面板添加正则表达式匹配文件名

Workspace：Devtools 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 maps

  • source 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年内前端人走向前列。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/275770.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Spring高级程序设计这本书怎么样

Spring高级程序设计这本书怎么样

关于Spring高级程序设计 评论读后感：这本书需要有一定的spring基础的人看读后感：对于了解Spring 很有用，并且是一本不错的参考书读后感：这本书早就想买了，就是太贵了～～～ 啦啦啦&…
阅读更多...
玉伯：开源有带给我什么

玉伯：开源有带给我什么

在2021年527蚂蚁技术日上，蚂蚁内源社区举办了内源专场，在专场上玉伯给大家分享了《开源有带给我什么》，以下为演讲的图文整理。我的开源之路我从2009年到2018年，接近十年时间，一直在做开源的一些事情，在这个…
阅读更多...
python并行运算库_最佳并行绘图Python库简介：“ HiPlot”

python并行运算库_最佳并行绘图Python库简介：“ HiPlot”

python并行运算库HiPlot is Facebook’s Python library to support visualization of high-dimensional data table, released this January. It is particularly well known for its sophisticated interactive parallel plot.HiPlot是Facebook的Python库，用于支持…
阅读更多...
Asp.net 文件上传的 FileUpload FileName 和 FileUpload PostedFile.FileName的细节问题

Asp.net 文件上传的 FileUpload FileName 和 FileUpload PostedFile.FileName的细节问题

Asp.net 文件上传的 FileUpload FileName 和 FileUpload PostedFile.FileName的细节问题 ASP.NET 文件上传估计大家都用得很熟悉，常用控件 FileUpload 。 主要步骤： 1.判断是否合法 2.获得文件的路径 （包括目录的完整路径，同时可能…
阅读更多...
【赠书福利】不扶好眼镜，请别打开这本挑战JS语言特性的书

【赠书福利】不扶好眼镜，请别打开这本挑战JS语言特性的书

文末赠福利大家好，我是若川。为感谢大家一直以来的支持和肯定，文末抽《JavaScript悟道》3本包邮送和若干红包，详细规则请看文末哦。"人们不停地给老化的语言“整容”，拼命地往其中注入各种新的特性来稳住其流行地位&#xff…
阅读更多...
我在工作中是如何使用Git的

我在工作中是如何使用Git的

大家好，我是若川。今天分享一篇关于git的好文章。我自己经常用命令行终端和git缩写。具体可以看我以往的文章。使用 ohmyzsh 打造 windows、ubuntu、mac 系统高效终端命令行工具，用过都说好。点击下方卡片关注我、加个星标学习源码整体架构系列、年度总结…
阅读更多...
克服浮躁_设计思维：您克服并赢得低迷的最终工具。

克服浮躁_设计思维：您克服并赢得低迷的最终工具。

克服浮躁设计思维101 (Design thinking 101) Let’s begin by getting ourselves clear on the question: What is design thinking?让我们首先弄清楚问题：设计思想是什么？ Many people have an impression that design thinking has something to do …
阅读更多...
java参数化查询_小博老师解析Java核心技术 ——JDBC参数化查询（二）

java参数化查询_小博老师解析Java核心技术 ——JDBC参数化查询（二）

[步骤阅读四]SQL注入按照以上方式开发，确实已经完成了基本的用户登录业务需求，但是这么做的话可以会出现一个比较严重的问题，那就是容易被SQL注入。所谓SQL注入，就是在需要用户填写信息，并且这些信息会生成数据库查询字…
阅读更多...
前端抢饭碗系列之Vue项目如何做单元测试

前端抢饭碗系列之Vue项目如何做单元测试

大家好，我是若川。今天分享一篇vue项目如何做单元测试的好文，文章比较长，建议先收藏，需要时用电脑看。点击下方卡片关注我、加个星标学习源码系列、年度总结、JS基础系列关于单元测试，最常见的问题应该就是“前端单元测…
阅读更多...
java activiti jbpm_activiti和jbpm工作流引擎哪个比较好？

java activiti jbpm_activiti和jbpm工作流引擎哪个比较好？

原标题：activiti和jbpm工作流引擎哪个比较好？在常用的ERP系统、OA系统的开发中，工作流引擎是一个必不可少的工具。之前在选择工作流引擎时曾经在activiti和jbpm之间有过比较，当时做出的决定是使用jbpm，但实际开发过程中…
阅读更多...
识别人声_演唱人声的5个技巧

识别人声_演唱人声的5个技巧

识别人声什么是声乐伴奏？ (What is Vocal Comping?) Vocal comping describes the process of combining multiple vocal takes into one “supertake” that has the best parts of each. This is called a “composite track,” or comp for short. Many instrum…
阅读更多...
你知道source map如何帮你定位源码么？

你知道source map如何帮你定位源码么？

大家好，我是若川。今天分享一篇我们经常会忽略的定位原始代码位置原理的文章。文章不长，例子不错，可以先收藏，有空时动手试试。学习源码系列、年度总结、JS基础系列前言我们知道，代码上线前要经过压缩，美化…
阅读更多...
OOP 中的 方法调用、接口、鸭式辩型、访问者模式

OOP 中的 方法调用、接口、鸭式辩型、访问者模式

2019独角兽企业重金招聘Python工程师标准>>> 方法调用的四种方式 直接调用：通过类或者实例直接调用其方法。接口调用或者转型调用：通过将实例回调给一个接口对象，或者转型为一个父类的实例，来调用间接调用：…
阅读更多...
游戏 新手引导 设计_我认为每个新手设计师都应该知道什么

游戏 新手引导 设计_我认为每个新手设计师都应该知道什么

游戏 新手引导 设计重点 (Top highlight)I should probably have titled this article “What I wish I knew as a newbie designer.” Anyway, I’ve been doing this graphic design thing for a little over a year now, and I know now, a few things that could have made…
阅读更多...
毕业年限不长的前端焦虑和突破方法

毕业年限不长的前端焦虑和突破方法

大家好，我是若川。今天周六，分享一篇相对轻松的文章。经作者耳东蜗牛 授权转载链接：https://juejin.cn/post/6968002742321152014也可点击文末阅读原文直达本篇文章来源于：周五和团队成员[20年毕业]的一次闲聊。毕业不到一年&…
阅读更多...
开源自然语言处理工具包hanlp中CRF分词实现详解

开源自然语言处理工具包hanlp中CRF分词实现详解

CRF简介 CRF是序列标注场景中常用的模型，比HMM能利用更多的特征，比MEMM更能抵抗标记偏置的问题。 [gerative-discriminative.png] CRF训练 这类耗时的任务，还是交给了用C实现的CRF。关于CRF输出的CRF模型，请参考《CRF模型格式说明…
阅读更多...
交互规则_您必须永不中断的10条交互设计规则

交互规则_您必须永不中断的10条交互设计规则

交互规则重点 (Top highlight)In life, there are certain rules you must never break. If you do there will be hell to pay. In User Interface design there are also rules to live by. They are called “heuristics” or general principles that improve usability in…
阅读更多...
一个帮助我100%拿offer的面试学习法

一个帮助我100%拿offer的面试学习法

大家好，我是若川。今天周日，再分享一篇相对轻松的文章。文中说的面试学习法有一定的借鉴意义。另外我也推荐大家每隔一段时间不为跳槽的更新自己简历，也是对自己一阶段的梳理总结，毕竟功在平时。哈喽大家好，我是大圣&a…
阅读更多...
java获取apk启动activity_兼容 Android 10 启动 APK 实现方案

java获取apk启动activity_兼容 Android 10 启动 APK 实现方案

背景我们想启动 APK 程序，有很多种方法，可以使用 Intent，也可以使用 adb shell 命令来启动，还有通过反射来启动 APk 程序。我们这里主要讨论通过反射的方式来启动 apk 程序。Android10 之前，我们通过反射来启动 APK&am…
阅读更多...
Android Studio中解决jar包重复依赖导致的代码编译错误

Android Studio中解决jar包重复依赖导致的代码编译错误

在原本的代码中已经使用了OKHTTP和rxjava，然后今天依赖retrofit的时候一直报错 Program type already present: okhttp3.internal.ws.RealWebSocket$1.class 说是我重复添加了OKHTTP的包，但其实我直接把OKHTTP的依赖注释掉都没用，只要依赖ret…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023