Chrome开发者工具，等你来

本文属xxKarina原创，转载请注明
个人博客地址：https://xxkarina.github.io/

学习前端，首要掌握的就是浏览器，编辑器，还有前端涉及的语言，那对于开发者来说，chrome开发者工具几乎是首选，你们会用了吗？熟悉使用开发工具，不管是对于开发者自身还是对于开发本身都是十分受益的一件事情，现在我们就一起来看看它到底是个什么东西吧

文章要点：

• Chrome开发者工具是什么
• 为什么要使用Chrome开发者工具
• 怎么使用Chrome开发者工具

Chrome开发者工具是什么？

打开你的浏览器，按下F12键或者ctrl+shift+i，你会发现这样一个东西

开发者工具整体界面

从页面标题Developer Tools我们就可以知道，这个就是我们要的Chrome开发者工具，它是一套内置在谷歌浏览器的Web开发和调试工具，一般的浏览器都会有开发者工具，使用方式都是大同小异，此篇文章都是围绕着谷歌浏览器展开，我们初略的将其划分为5各部分，分别是

• title 部分，标志当前所在位置
• 导航部分，标志当前的功能模块
• 源代码部分，标志当前所选区域的代码
• 样式，监听等计算所得部分，标志当前所选模块的计算信息
• 控制台等调试输出部分，标志当前的状态信息

title部分，这部分只是简单的展示你当前的位置信息，标志你所在的位置，只需知道即可

导航部分，这部分是很重要的部分，几乎涵盖你可以操纵的全部功能模块，我们一部分一部分来探究

首先关于界面模块，我们可以选择将开发者工具嵌入我们的主界面，也可以独立出来
选择页面右上角主菜单的dock side侧邻区，选择自己需要的位置即可

选择界面的位置

下面的分别是：

• Hide console drawer就是隐藏console控制台等调试输出部分的面板
• Search all files就是全局搜索
• Shortcuts就是快捷键，这部分内容其实已经整合在setting里面了
• Help就是帮助界面了，有两个部分，一个是Documentation文档，一个就是-
• Release Notes版本注释，这两部分使用的前提就是你可以访问谷歌了，可以选择翻墙哦
• More tools就是更多工具啦，咱们来看看

更多工具More Tools

这里就不逐个展示啦，感兴趣的童鞋可以尝试下哦，蛮有趣的

animations ——动画；coverage ——范围；JavaScript profiler ——js分析器
layers ——层；network conditions ——网络条件；quick source ——快速源
remote devices ——远程设备；rendering ——渲染；request blocking ——请求阻塞
search ——搜索；sensors ——传感器；what's new ——什么是新的

• Setting就是设置，可以设置相关的样式，主题色，布局，以及一些面板的调控和相关功能的设置
  设置面板

为什么要使用开发者工具

开发者工具是一套内置在浏览器的Web开发和调试工具，开发者可以使用它来调试，解析开发的网站，我们都知道Web开发的效果会在浏览器上展现

浏览器和服务器交互的过程，就是”一次性“的过程，在页面初始化的时候就会将html页面以及它的依赖项全部下载在浏览器上，然后经过浏览器的解析之后就可以渲染出页面的效果，就是基于这点，我们就有了深入剖析代码运行过程的机会，而这个机会就是通过开发者工具展现出来

如今为了更好的用户体验，将受众扩大，不少网站纷纷都采用响应式布局，那在这种情况下，为了更好的开发，chrome开发者工具给我们提供了一个设备模式

使用设备模式，我们就可以模拟移动设备，来构建移动优先，完全响应式的网站，可以在浏览器上近似的展现你的网站在移动设备上的显示效果，这对于我们开发者来说无疑是一个很好的礼物

设备模式的使用：

设备模式的使用

选择模式的使用：

有时候我们想在一个页面直接查看某部分的代码，虽然可以鼠标悬停在上面，然后右键检查，但是这样不是很灵活，如果我们想随心的查看代码，就可以使用浏览器提供的选择模式（快捷键Ctrl+shift+C）

选择模式

这样就可以很方便的查看我们的代码了

知道了这些基本的辅助操作，我们就可以开始着手我们的项目啦

怎么使用Chrome开发者工具

element面板：

element面板

element面板不仅可以查看我们的代码，还可以进行即时性的更改（双击需要更改的元素），可以实现自由的更改样式和布局

• 在element面板可以随时操作DOM树的元素
• 在style窗格可以操作选定元素的样式和CSS规则

比如单击:hov就可以模拟当前选定元素的hover activity focus activited态
单击:cls就可以元素的类名等‘

• Computed窗格可以查看盒模型（margin padding border）
• Event Listeners事件监听，可以监听选定元素绑定的事件
• DOM Breakpoints你猜猜是什么，对了，就是DOM断点调试’

是不是和很神奇，哈哈哈，js断点，Java断点，c++断点，原来你（DOM）也有断点啊，真是白认识了这么多年，选中元素，鼠标右键，选中菜单中的Break on，Attributes modifications刷新你的页面，当该元素的属性发生变化时，就会暂停脚本的执行，并且定位到改变发生的地方。是不是很棒呢

console面板：

控制面板功能其实很强大的，使用起来又十分的方便，之前就是在控制面板编辑了一些脚本，完成了教学质量评价，感兴趣的童鞋看过来，教学评估

     功能：

• 记录开发者开发过程中的日志信息
• 与js进行交互的“命令行shell”

控制面板

• 左上角的禁止符号可以清空控制台的日志信息

• top页面的顶部框架，切换console环境，如果页面里有iframe这里就可以切换，切换后相当于打开iframe的console。选择top frame就是当前标签页的console

• info这个下拉框可以筛选控制台的日志信息

• filter过滤器，同样的，也是为了筛选console输出的信息

• preserve log保存历史纪录，就是在页面刷新的时候你的console口编辑的信息还在，但是只是作为显示，怎么说呢，就是比如你之前定义了var a = 1;但是你刷新页面的时候虽然之前的输出还在，但是这个时候你的a就已经是未定义的了

source面板：

这个面板的功能十分的强大，都是很实用的

• 功能一：实现本地文件和浏览器修改即时同步

我们先来看两张图

workspace功能-更新之前 workspace功能-更新之后

是不是发现了什么呢，没错，这个就是workspace的强大功能了，实现将浏览器的更改同步到本地，这样就可以省去界面切换和粘贴复制的繁琐步骤了，就相当于有个文件缓冲区，设置关联之后，一旦将更改保存，则缓冲文件就会覆盖原先的文件，实现同步的效果，整个期间，可以一直在浏览器界面，不经过外界

怎么操作呢？
首先，打开你的source面板
然后，选中你要操作的文件，右键选中菜单中的 add floder to workspace
授予权限之后就可以关联了，依然是右键，选中菜单的map to file system

• 功能二：监听变量的变化过程

上面不是提到了DOM树其实也是可以打断点的吗，那既然可以打断点，肯定就会有一个调试模块啊，而source的watch窗格正好就是这个模块

DOM树的watch调试窗格

这里可以打断点、增加监听的变量、删除变量、更新变量还有就是常规的调试功能，按照窗格上面的说明来就可以了，用起来还是蛮不错的

network面板：

面板主要的工具也是常规的几个，

• 加载以及渲染过程的信息
• 数据的筛选匹配记录
• 查看详细的资源请求和响应数据（常用）
• XHR 重放

network面板

掌握了这些你就可以从一个小白变成一个不是那么白的小白啦！