Chrome 调试技巧（一） 通用方法

目录

 

1. copy(...)

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

3.保存堆栈信息( Stack trace )

4.直接Copy HTML

5.使用 Command

5.1  截屏的新姿势

5.2 快速切换面板

5.3 快速切换主题

6. 代码块的使用

---

1. copy(...)

你可以通过全局的方法 copy() 在 console 里 copy 任何你能拿到的资源。例如 copy($_) 或 copy($0)

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

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

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

3.保存堆栈信息( Stack trace )

大多数情况下都不是一个人开发一个项目，而是一个团队协作，那么 如何准确的描述问题，就成为了沟通的关键 ，这时候 console 打印出来的堆栈跟踪的信息对你和同事来说就起大作用了，可以省去很多沟通成本，所以你可以直接把堆栈跟踪的信息保存为一个文件，而不只是截图发给对方：

4.直接Copy HTML

几乎所有人都知道，右击或者点击在 HTML 元素边上的省略号 (...) 就可以将它 copy 到剪贴板中

，但是你不知道的是：古老的[ctrl] + [c]大法依旧可用

5.使用 Command

我们直接可以直接看到的 DevTools 的功能，其实只是有限的一部分，怎么去探索更多的功能呢？

   Command 菜单可以帮助我们快速找到那些被隐藏起来的功能，这也是它本身必不可少的原因。

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

下图中，我整理了可供选择的命令列表，归为几个部分：

5.1  截屏的新姿势

       当你只想对一个特别的 DOM 节点进行截图时，你可能需要使用其他工具弄半天，但现在你直接选中那个节点，打开 Command 菜单并且使用 节点截图 的就可以了。

不只是这样，你同样可以用这种方式 全屏截图 - 通过 Capture full size screenshot 命令。请注意，这里说的是全屏，并不是嵌入页面的一部分。一般来说这可是得使用浏览器插件才能做到的事情！

5.2 快速切换面板

DevTools 使用双面板布局，形式一般是：元素面板 + 资源面板 ，它根据屏幕可用的部分，经常将不同面板横向或者纵向的排列，以适合阅读的方式展示出来。但有时候我们并不喜欢默认的布局。

你是否想过要重置 DevTools 呢？将 样式面板 从 html预览 的底部移动到右边或者周围其他的位置呢？是的，这就是下面要介绍的 😉

打开 Commands 菜单并且输入 layout ，你会看到 2 到 3 个可供选择的项(这里不再显示你已经激活的选项)：

• 使用横向面板布局
• 使用纵向面板布局
• 使用自动面板布局

5.3 快速切换主题

在 Commands 菜单中寻找与 theme 相关的选项，实现 明亮 & 暗黑 两种主题之间的切换：

6. 代码块的使用

Snippets 的用武之地：它允许你存放 JavaScript 代码到 DevTools 中，方便你复用这些 JavaScript 代码块：

进入到 Sources 面板，在导航栏里选中 Snippets 这栏，点击 New snippet(新建一个代码块) ，然后输入你的代码之后保存，大功告成！现在你可以通过右击菜单或者快捷键： [ctrl] + [enter] 来运行它了：

当我在 DevTools 中预设了一组很棒的代码块以后，甚至都不必再通过 Sources 来运行它们。使用 Command Menu 才是最快的方式。只需在它的输入框中输入 ! ，就可以根据名字来筛选预设代码块：