Chrome开发者工具详解

Lovely
2,918 阅读6分钟

简介

浏览器自带的工具，用于开发时调试和检查网页应用的状态

打开方式

  • chrome 右上角菜单，更多工具，开发者工具
  • 页面上右键，菜单里选检查（inspect）
  • windows：ctrl + shift + I （或者 F12）
  • mac： cmd + opt + I

element面板

element面板支持查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。如下图所示：element 面板由左边DOM元素面板和右边属性面板组成

image.png

DOM元素面板

查看 DOM 元素在页面上的对应显示（可结合面板上鼠标一起用）

image.png

搜索 DOM 元素(选中面板ctrl + F)

image.png

添加删除和修改元素

可直接在DOM元素面板上增加DOM元素或删除DOM元素 右键点击Edit as HTML这样你就可以愉快的操作DOM元素啦~ image.png image.png

添加伪类

image.png

拖动 DOM 元素来修改位置

可以像平时拖动文件夹一样拖到DOM元素，并修改DOM元素的位置

选中节点时通过 $0 就可以引用到该节点

image.png

scroll into view 定位节点

右键点击scroll inti view页面就会滚动到目标位置啦~ image.png

属性面板

style面板

  • 修改样式
  • toggle 样式
  • 伪类调试(调试元素伪类对应的样式) image.png
  • 新增类 image.png

computed面板

  • 查看样式
  • 调试盒模型
  • 定位样式生效的位置
  • 对css属性进行分组

animations面板

动画检查器

作用：

  • 检查动画。放慢，重放或检查动画组的源代码。
  • 修改动画。修改动画组的时间，延迟，持续时间或关键帧偏移。

如何打开animations面板

  • 单击更多打开主菜单->导航到“更多工具”子菜单->选择Animations image.png

  • 打开命令菜单（快捷键Ctrl + Shift + P），然后键入Show Animations。 image.png

  • animations面板所在位置 image.png

面板详解

image.png

  • 1：控件面板。清除所有当前捕获的动画组，或更改当前所选动画组的速度。

  • 2：概述面板。在此处选择一个动画组以在“详细信息。检查并修改当前选定的动画组”窗格中进行检查和修改

  • 3：时间轴面板。从此处暂停并开始动画，或跳到动画中的特定点

  • 4：详细信息。检查并修改当前选定的动画组 image.png

控件面板

image.png

  • 1：清除已经捕获到的动画
  • 2：暂停/启动 动画的播放
  • 3：修改动画的播放速度

概述面板 and 详细信息面板

  • 捕获动画组后，在“概述”面板中单击它以查看其详细信息。在“详细信息”面板中，每个单独的动画都有其自己的行。

  • 将鼠标悬停在动画上以在视口中突出显示它。单击动画以在“元素”面板中将其选中。

  • 动画的最左边，颜色较深的部分是它的定义。向右，更浅色部分代表迭代。例如，在下面的截图中，第二部分和第三部分代表第一部分的迭代。

    image.png

  • 若要更改动画的持续时间，单击并拖动第一个或最后一个圆圈。

NetWork面板

NetWork面板主要用来检查网络活动

网络日志

网络日志的每一行代表一个资源。默认情况下，资源按时间顺序列出。最重要的资源通常是主要的HTML文档。最底层的资源是最后请求的资源。

image.png

默认列

  • Name：资源请求url(从哪里请求资源)
  • Status：HTTP响应码
  • Type：资源类型
  • Initiator：是什么导致了资源的请求。单击“Initiator”列中的链接，将您带到引起请求的源代码。
  • Time：请求花了多长时间
  • Waterfall：请求不同阶段的图形表示。将鼠标悬停在瀑布上可以查看细目。

网络日志的列是可配置的。您可以右键单击表头隐藏/显示列

image.png

模拟一个较慢的网络连接

个别情况下我们需要模拟一个网络较差的环境来测试我们的网站是否会出现异常情况。具体操作如下：

  • Throttling菜单选中Slow 3G

    image.png

  • 当您想了解首次访问者如何体验页面加载时，长按Reload 重装，然后选择Empty Cache And Hard Reload。

    image.png

Capture screenshots

Capture screenshots使您可以看到页面在加载过程中的外观，屏幕截图窗格提供了缩略图的缩略图，该缩略图显示了页面在加载过程中各个点的外观。

image.png

  • 单击任意一个缩略图。DevTools会向您显示当时正在发生的网络活动。

  • 双击缩略图，得到缩略图录像，点击前进后退按钮可以查看不同时间点的页面活动

    image.png

Filter resources

  • 单击过滤器筛选显示它。在过滤器输入目标资源或点击右边的资源类型按钮进行过滤。

    image.png

Block requests

当我们想测试页面的某些资源不可用时，页面的外观和行为如何？它会完全失败，还是仍然有些功能？Block requests 可以实现这个效果

  • 按Control + Shift + P或Command + Shift + P（Mac）打开“命令菜单”。

  • 键入block，选择显示请求阻止，然后按Enter。

    image.png

  • 点击添加模式 +

  • 输入main.css，点击添加

    image.png

  • 重新加载页面。正如预期的那样，页面的样式有些混乱，因为其主要样式表已被阻止。请注意main.css网络日志中的行。红色文本表示该资源已被阻止。

    image.png

Sources面板

source面板主要是用来调试我们的源代码

Page面板查看当前页面加载的所有资源

image.png

  • top代表网页的主要框架，任意一个页面都有top这个目录
  • 第二级目录例如: developers.google.com 表示请求来自于哪个站点
  • 第三级目录、第四级目录、第五级目录...代表从该站点加载的目录和资源

快速搜索目标文件

平时我们需要对某个文件进行调试，是没必要手动挨个去查找目录下的文件的，我们可以： ctrl + P 打开搜索面板 -> 输入目标文件名

编辑CSS

  • 修改css的内容能立即生效

编辑JavaScript

  • 修改js的内容能立即生效

调试JavaScript

大部分情况下我们利用浏览器的Debugg比我们在代码里面写console效率要高的多

  • 例如 一个简单的sum函数 1+2=12明显不是我们想要的结果，我们很容易猜测出是因为数据类型引起的Bug,但是我们怎么验证呢

image.png

  • 在执行函数打个断点，我们可以在Scope面板看到声明的变量，在Watch面板可以执行js，我们执行typeof 可以认证我们的猜想，字符串相加所以结果不正确，debugg的时候在console我们可以引用函数执行环境的变量，再进行parseInt转换发现能得到正确的结果。

  • Add conditional breakpoint（添加条件断点）

    image.png

  • 详情请参考

最后

感谢大家阅读，如有问题欢迎纠正！

avatar
文章
阅读
粉丝