谷歌浏览器（通常简称为 Chrome ）是由谷歌开发的网络浏览器。 它于 2008 年首次针对 Microsoft Windows 发布，后来移植到 Linux ，macOS ，iOS 和 Android 。 浏览器也是 Chrome OS 的主要组件，它可以作为 Web 应用的平台。Chrome-wikipedia

浏览器的市场天下三分，Chorme，Safari和FireFox，从 2008 年 Chrome 横空出世以来，如今已经一家独大占据了半壁江山：

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

DevTools 简介打开 Chrome 开发者工具

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

了解面板

我将从以下 8 个面板来讲述面板内容：

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

1. 元素面板

使用元素面板可以自由的操作 DOM 和 CSS 来迭代布局和设计页面。

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

2.控制台面板

在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell 在页面上与 JavaScript 交互。

• 使用控制台面板
• 命令行交互
  

3.源代码面板

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

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

4.网络面板

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

• 网络面板基础
• 了解资源时间轴
• 网络带宽限制
  

5.性能面板

使用时间轴面板可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能。

6.内存面板

如果需要比时间轴面板提供的更多信息，可以使用“配置”面板，例如跟踪内存泄漏。

• JavaScript CPU 分析器
• 内存堆区分析器
  

7.应用面板

使用资源面板检查加载的所有资源，包括 IndexedDB 与 Web SQL 数据库，本地和会话存储，cookie ，应用程序缓存，图像，字体和样式表。

• 管理数据
  

8.安全面板

使用安全面板调试混合内容问题，证书问题等等。

• 安全
  

通用篇 - copying & saving
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]大法依旧可用！

赞赞赞