知识整理

chrome调试工具使用

对于大部分人来说，Chrome 可能只是个浏览器，但是对于开发人员来说，它更是一个强大无比的工具，为了方便开发人员调试代码，主流的浏览器都内置了 DevTools， 所以无论你是前端还是后端，掌握 Chrome 的调试技巧意味着效率直接的提高。

打开 Chrome 开发者工具方法

• 在 Chrome 右上角的 '' 菜单中选择 更多工具 > 开发者工具
• 在页面元素上右键点击，选择 "检查"
• 使用 快捷键 Ctrl + Shift + I (Windows) 或 Cmd + Opt + I (Mac)

了解面板

• 元素面板
• 控制台面板
• 源代码面板
• 网络面板
• 性能面板
• 内存面板
• 应用面板
• 安全面板

元素面板

元素面板主要用于操作 DOM 和 CSS 来调整布局和设计页面。

• 检查和调整页面
• 编辑样式
• 编辑 DOM

控制台面板

可以使用控制台面板查看日志信息，或者使用它作为 shell 在页面上与 JavaScript 交互。

源代码面板

在源代码面板中设置断点来调试 JavaScript ，或者通过 Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器

• 断点调试
• 调试混淆的代码
• 使用开发者工具的 Workspaces（工作区）进行持久化保存

网络面板

使用网络面板了解请求和下载的资源文件并优化网页加载性能。

• 了解资源加载状态
• 了解资源时间轴和加载顺序
• 网络带宽限制

性能面板

使用时间轴面板可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能。这是比较高级的技术范畴, 很多优化都是在这里进行.

内存面板

也属于高级技能范畴, 常用于跟踪内存泄漏。

• 内存堆区分析器

应用面板

使用资源面板检查网站的存储资源，常用于查看或编译cookie. 还包括会话存储，cookie ，应用程序缓存，图像，字体和样式表, IndexedDB 与 Web SQL 数据库等。

• 管理数据

安全面板

安全面板会显示出常规的安全问题，证书问题等。

常用技巧

• copy 可以通过全局的方法 copy() 在命令行里 copy 任何你能拿到的资源, 有时变量非常长或缩略展示, 选中复制就比较难.用这个就很方便.

• Store as global (存储为一个全局变量)

如果你用 console 中打印了一堆数据 (例如你在 App 中计算出来的一个数组) ，然后你想对这些数据做一些额外的操作比如我们刚刚说的 copy (在不影响它原来值的情况下) 。 那就可以将它转换成一个全局变量，只需要 右击 它，并选择 "Store as global variable" (保存为全局变量) 选项。

第一次使用的话，它会创建一个名为 temp1 的变量，第二次创建 temp2，以此类推。通过使用这些变量来操作对应的数据，不用影响 到他们原来的值.

• 元素面板中类似于基础编辑器的操作 选中某个节点, 我们可以拖动，放置，编辑，复制,粘贴等操作, 所以我们可以在元素面板里把 HTML 结构搞得一团糟。如果要撤回你的操作, 可以使用[ctrl] + [z] ([⌘] + [z] on Mac)撤销我们的任何改动。 使用 [ctrl] + [shift] + [z]重新编辑我们的任何修改。

• 直接Copy HTML

右击或者点击在 HTML 元素边上的省略号 (...) 就可以将它 copy 到剪贴板中，其实古老的[ctrl] + [c]大法依旧可用！

• 隐藏元素

按一下 'h' 就可以隐藏你在元素面板中选择的元素或者右键菜单里或最左测的'...'。再次按下 'h' 可以使它出现。

• 移动元素元素 当你想看看页面的某一部分在 DOM 树的不同位置的显示效果时，只需要拖动放置它到指定的位置. 也可以使用快捷键[ctrl] + [⬆] / [ctrl] + [⬇] ([⌘] + [⬆] / [⌘] + [⬇] on Mac)

• elements， logs， sources , network 中的查找

DevTools 中的前4个主要的面板，每一个都支持 [ctrl] + [f] 快捷方式，你可以使用对应的查询方式来查找信息:

• 在 Elements 面板中 - 通过 string ，选择器 或者 XPath 来查找
• 而在 Console， Network 以及 Source 面板 - 通过区分大小写来查找.

• 使用 Command

我们直接可以直接看到的 DevTools 的功能，其实只是有限的一部分，其实还有很多的功能没直接展示. Command 菜单可以帮助我们快速找到那些被隐藏起来的功能。

• 在 Chrome 的调试打开的情况下 按下 [ Ctrl] + [Shift] + [P] (Mac： [⌘] + [Shift]+ [P] )
• 或者使用 DevTools 的 dropdown 按钮选项:

• 截屏

• 捕获区域截图
• 捕获完整截图(可实现滚动截图)
• 捕获节点截图
• 捕捉屏幕截图(当前页面可视区域截图)

• Snippets 用户代码片段

我经常使用 JavaScript 作为我的工具，来处理网页或进行特定功能运算. 就可以把常用js代码存放到 DevTools的 Snippets 中，方便你复用这些 代码块.

当我在 DevTools 中预设了一组很棒的代码块以后，甚至都不必再通过 Sources 来运行它们。使用 ctrl + p , 展示打开窗口后, 只需在它的输入框中输入 ! ，就可以根据名字来筛选预设代码块

• $快捷指令

如果没有在全局中定义过 $ 变量 (例如 jQuery )的话，它在命令行中就是对这一大串函数 document.querySelector 的别名。

• $_快捷指令 调试的过程中，你经常会通过打印查看一些变量的值，但如果你想看一下上次执行的结果呢？再输一遍表达式吗？这时候 $_ 就派上了用场，$_ 是对上次执行的结果的 引用

• $0快捷指令 在 Chrome 的 Elements 面板中， $0 是对我们当前选中的 html 节点的引用。

理所当然，$1 是对上一次我们选择的节点的引用，$2 是对在那之前选择的节点的引用，等等。一直到 $4.

• console.log 的 "bug" 举个例子:

const person = {a:1, name:'Tomek'}
console.log(person)

person.a = 2
person.name = 'New Tomek'
console.log(person)

这个demo的属性比较少, 一眼能看出来问题, 当复杂对象可能导致调试困惑.

怎么解决?

使用资源面中的断点来调试
使用 `JSON.stringify()` 方法处理打印的结果

• 颜色选择器

这个可以帮我们快速测试出想要的效果.

• DOM 断点

有时脚本修改了 DOM ，但修改的是哪部分？什么时候修改的呢？

这样的情况下，你就可以添加一个 DOM 断点：监听节点被添加或者移除 / 属性被改变。

 点击"..." 符号或者右击你想添加监听的元素
 选择 `subtree modifications` :监听任何它内部的节点被 `移除` 或者 `添加`的事件
 选择 `attribute modifications` :监听任何当前选中的节点被 `添加`，`移除` 或者 `被修改值`的事件
 选择 `node removal` :监听被选中的元素被 `移除` 的事件

页面重新加载时会记住断点。添加了断点的元素会在 Element 中用高亮展示出来.

• Drawer 面板

在 Elements ，Sources ，Network等面板, 按 [esc] 就会显示它，再次按 [esc] 隐藏它. 另外，你也可以打开之前我们提到的 command Menu ，然后输入 Drawer 来打开它. 默认情况下，您会看到一个 console 选项卡。 与主面板的 console 相同.

Drawer 里隐藏着许多其他功能，大多数时候你可能不需要用到它们，这也是它们为什么被隐藏起来的原因，然而，你可以直接选择你想展示在这里的功能。

点击主页面在 Drawer的 console 面板前面的 ⋮ 图标来打开完整选项列表。

• 模拟网络状态

可以使用 Drawer 里的 Network conditions 面板模拟特定的网络行为：模拟互联网为典型的3G网络甚至离线！ 这通常用来了解页面资源的大小。或者测试应用的离线功能。Network 面板也有这个功能. Network conditions 面板还可以模拟特定的用户代理(iPhone, iPad等)。

• Changes-检查你修改的内容

通过浏览器进行设计和调整 css ：能够在代码执行的地方进行调试是方便又有趣的开发方式。 但在某些时候，你可能希望将 已更改的内容 与 最初加载的样式表 进行比较。

为此，可以使用 Drawer 中的 Changes 工具。

• Conditional breakpoints 条件断点 有时设置的断点被执行了太多次. 假设有一个包含 200 个循环，但是你只对第 110 次循环的结果感兴趣，如何高效调试? 这时就需要用条件断点.

  • 右击行号，选择 Add conditional breakpoint...(添加条件断点)
  • 或者右击一个已经设置的断点并且选择 Edit breakpoint(编辑断点)
  • 然后输入一个执行结果为 true 或者 false 的表达式

在这个表达式中你可以使用任何这段代码可以获取到的值（当前行的作用域）。如果条件成立，这个断点就会暂停代码的执行.

• 条件断点新玩法--辅助线上调试

我们利用如果条件返回的是 falsy 的值，它并不会暂停执行来添加 console.log, console.time 等. 来动态添加调试信息且不要改动代码.

• console.table以一个漂亮的表格的形式打印日志

如果有一个 数组 (或者是 类数组 的对象，或者一个 对象 )需要打印，你可以使用 console.table 方法将它以一个漂亮的表格的形式打印出来。它不仅会根据数组中包含的对象的所有属性，去计算出表中的列名，而且这些列都是可以 缩放 甚至 还可以排序. 如果你觉得展示的列太多了，使用第二个参数，传入你想要展示的列的名字.

• console.dir

有时候你想要打印一个 DOM 节点。 console.log 会将这个交互式的元素渲染成像是从 Elements 中剪切出来的一样。如果说你想要查看 这个节点所关联到的真实的js对象 呢？并且想要查看他的 属性 等等？

在那样的情况下，就可以使用console.dir.

• 监测执行时间 要查看脚本中的执行时间，我们可以采用一对有效的 console 方法

• console.time() --- 开启一个计时器
• console.timeEnd() --- 结束计时并且将结果在命令行中打印出来

如果你想一次记录多件事，可以往这些函数中传入不同的标签值。(例如: console.time('loading') ， console.time('processing') )

• XHR/fetch 断点

有时需要跟踪哪里触发的某个服务请求, 可以通过 XHR/fetch 断点来拦截

点击如图按钮, 输入部分url就可以了.

• Request initiator 显示了调用堆栈信息

这里点击就会显示调佣堆栈, 便于分析执行逻辑.

• 资料推荐:

1. Google Chrome Developers

高度推荐你订阅 Google Chrome Developers 的 YouTube 频道，这是在 Chrome 中展示已有的新内容的地方。 不仅如此，你还可以去那里寻找有关最佳实践，JavaScript 演变等的讨论。对于任何一位前端开发人员来说，这里都有许多有价值的内容。

Google Chrome Developers - YouTube

2. Developers.google.com

当我在撰写这个系列时，除了分享最喜欢的功能和技术积累之外，也在查阅 Developers.google.com ，你可以 （"按年"）或 技术（"按标签"）去查询一些有关特定更新的信息

调试vue部分源码