Chrome DevTools

kim__jin
63 阅读8分钟

概览

信息概览

Element

元素面板

  • 第一部分：操作dom元素
    • 查看DOM树
    • 选取DOM节点
    • 操作DOM节点
  • 第二部分
    • 查看界面样式
    • 修改界面样式
  • 第三部分
    • 相当于一个目录，指向指定的地方

console

基本的console使用方法

console.warn('<output>') // 用来显示警告
console.error('<output>') // 用来显示错误
console.info('<output>') // 用来显示提示信息
console.assert([Condition Expression], '<output>') // 可以在console进行打出断言的结果
console.clear()// 清空控制台的内容

console.dir([DOMElement])// 打印DOM元素
console.table([object/array]) // 以表格的形式打出对象或是数组

/**
 * 將輸出資料分群顯示
**/
console.group('<groupName>')             // 開始分群，預設展開
console.groupCollapsed('<groupName>')    // 開始分群，預設不展開
console.groupEnd()                       // 結束分群

例子：

console.warn('aijin')
console.error('aijin')
console.assert(2<3,'The condition is true') // 正确的时候不会打出后面的断言
console.assert(2>3,'The condition is false')

const data =[{name:'json',age:'11'},{name:'lucy',age:'12'},{name:'iii',age:'13'}]
console.log(data)
console.table(data)

console.log("Runoob");
console.group("RunoobLabel");
console.log("我在指定标签分组里22。");
console.log("我在指定标签分组里22。");
console.groupEnd()
console.log(7777)

/**
 * 使用 '%c' 幫輸出的內容添加樣式
**/
console.log('%c What a Cool Console', 'font-size: 32px; color: red')

console的结果

console.table的结果

设置分组的结果

添加样式的console

console的特殊用法

// 計數
console.count([String])

// 計時
console.time([String])            // 開始計時
console.timeEnd([String])         // 結束計時

console.count() 每次调用，如果标签一样数字会增加 1，如果不一样则重新开始计数。

console.count("Runoob");
console.count("Runoob");
console.count("Runoob2");

count的用法

console.time() 可以用来计算一个算法执行了多长的时间

console.time("Runoob");
for (i = 0; i < 100000; i++) {
  // 代码部分
}
console.timeEnd("Runoob");

算法的执行时间

Source

source的面板截图

第一部分
  • content script：主要是第三方插件和Chrome浏览器资源问件等
  • Snippets.js:，允许用户自设定JS，主要用来测试JS文件、记住调试片段、单元测试、少了功能代码编写等
console.log('Hello, Snippets!');
document.body.innerHTML = '';
var p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);
第二部分
  • 设置和取消断点。选择想要设置断点的js具体行，点击行号，就设置了断点，再次点击，就取消已设置的断点。
  • CTR+F 快速查找匹配资源。CTR+G 快速定位文件具体行。
  • “{}”表示格式化代码。
  • 紧挨{}处右侧，表示当前光标行号和列号。

第二部分

第三部分
  • F10单步执行，但当遇到方法，不进入方法，直接方法外的下一行代码
  • F11单步调试，且遇方法体，需要经过。

第三部分

  • call Stack：函数被调用的调用栈

  • Scope监视环境变量，私有变量、公有变量、全局变量等。

<html>
  <head>
    <script>
      const add1 = () => {
        let a = 1;
        let b = 2;
        console.log(alert);
      };
      add = () => {
        add1();
      };
    </script>
  </head>
  <body>
    <button onclick="add()">1111</button>
  </body>
</html>

第三部分

network

network面板的概况

停止记录网络请求
  • 点击Stop recording network log红色图标，当它变为灰色时，表示DevTools不在记录请求

清除网络请求

跨页面加载时，保留网络请求记录

当页面重载或是跳转页面的 时候，netWork面板的网络请求也是应该刷新的，想要保留跳转或是重载之前的请求可以勾选Preserve log，这个场景在登录跳转的时候十分的常见。

跨页面保留网络请求记录

页面加载时捕获屏幕截图

捕获屏幕截图可以分析在页面加载的过程中，用户在不同的时间段内看到的网页是什么样子的。 点击Capture screenshots图标开启捕获功能，当图标变为蓝色表示已开启，重载页面即可看到不同时间的屏幕截图

页面加载时捕获屏幕截图

  • 鼠标悬浮在一张图片上时，该图片四周会出现一个黄色的边框，同时，在Overview和Waterfall窗口里面也分别有一条黄色的竖线，这条黄色的竖线表示这张图片的捕获时间

  • 点击某一张图片，可以过滤掉在这张图片捕获之后发生的所有请求

  • 双击图片，可以放大该图片

禁用浏览器缓存

有些资源在状态码为304的时候，证明我们使用的是浏览器缓存的资源，为了尽可能准确的模拟我们第一次加载网页的情景，需要禁止使用浏览器的缓存，我们可以勾选下面的图标。

禁止使用缓存的请求

模拟网速条件

在Network Throttling下拉框中可以选择不同的网络条件进行模拟，如2G、3G、4G、WiFi等，当想要断网的时候直接选址offline就可以

模拟网速条件

提示：有时候开发者会看到Network左侧有个警告图标，这个图标就是提示开发者当前处于模拟网络条件下。

模拟网络

手动清除浏览器缓存、cookies

在网络请求记录表里面右键，选择Clear Browser Cache或Clear Browser Cookies。

手动清除缓存和cookie

根据属性过滤

输入框中可以输入一些字符串、域、大小、状态码、媒体类型等等可以实现过滤，也可以根据类型进行过滤

过滤属性

隐藏data URLs

data URLs指一些嵌入到文档中的小型文件，在请求表里面以data:开头的文件就是，如较为常见的svg文件。勾选Hide data URLs复选框即可隐藏此类文件。 隐藏data URLs

查看请求记录

请求列表

  • Name：文件的名字或者资源的标识符

  • Status：HTTP状态码

  • Type：请求资源的MIME类型

  • Initiator：以下对象或处理可以发起一个请求

    • Parse：Chrome的HTML解析器

    • Redirect：HTTP重定向

    • Script：js函数

    • Other：一些别的处理或操作，比如通过链接导航到一个页面，或者是在浏览器的地址栏输入一个地址然后回车

  • Size：响应头大小+响应体大小

  • Time：总的持续时间，从发起请求到资源下载完成

  • Waterfall：每一个请求活动的不同阶段的可视化展示

查看请求的详情

  • Preview：查看响应体的预览
  • Response：查看响应体
  • Timing：查看请求在各个阶段对应的时间

timing的详情

  • Queueing：浏览器会在以下情况对请求进行排队：

    • 有更高优先级的请求

    • 在这个域下，已经有6个TCP连接了，达到Chrome最大限制数量。此条规则仅适用在HTTP/1.0和HTTP/1.1

  • Stalled：Queueing中的任何一个因素发生都会导致该请求被拖延

  • Request sent：请求发送消耗的时间

  • Waiting (TTFB)：浏览器等待响应的时间，TTFB表示 Time To First Byte

  • Content Download：资源下载所消耗的时间

Performance

DEMO的链接 demo

模拟移动设备的CPU

有的时候移动设备的CPU一般会比台式机和笔记本差很多，当我们想要等戏界面的时候，可以用cpu控制起来模拟移动设备，具体的操作如下所示：

操作示意图

ps：其中的4xslow是：Devtools开始模拟两倍速低速CPU

设置demo并记录运行时的性能

打开上面的demo

  • 其中ADD是添加蓝色的小方块
  • 点击 Optimize按钮，你会发现蓝色小方块会变的很快而且动画变得平滑。
  • 点击 un-optimize 按钮，蓝色小方块又会变成之前的模样。

点击performace的录制按钮，我们就可以录制各种指标

录制指标

等待一会，点击stop按钮 DevTools就会停止录制并开始处理数据了：

数据详情

分析数据指标

我们从上向下看：

  • FPS：如果发现了一条很长的红色长条，那么说明这些帧存在问题，这个时候用户的体验是十分差的
  • cpu：颜色和Summery里的样式是一一对应的，cpu表格中的各种颜色代表CPU在这各种处理上花费的时间，如果某一项的占用的时间过长，那么这里就可以找到性能瓶颈线索
  • Frames图表：移动在这个上面去的，Devtools就会展现这个帧的FPS，每一个帧都可能在60以下，没有达到标准
    • 谷歌浏览器提供了中可以实时显示FPS的面板：
      • 按下 Command+Shift+P（Mac）或者 Control+Shift+P(Windows, Linux) 打开命令菜单
      • 输入Rendering，点选Show Rendering
      • 在Rendering面板里，激活FPS Meter。FPS实时面板就出现在页面的右上方。
定位瓶颈的位置

瓶颈位置

大部分的时间花费在了rending位置上，所以我们想要提高性能就要减少rendering的时间

  • 我们打开Main图标，Devtools展示了主线程的运行状况，X轴代表的是时间，每一个长条代表一个event，长条越长，代表这个event花费的时间越长，y轴代表了调用栈，在栈里面，上面的event调用了下面的event。
  • 在事件长条的右上角出，如果出现了红色小三角，说明这个事件是存在问题的，需要特别注意。
  • 在app.update这个事件的长条下方，有很多被触发的紫色长条。如果放大这些事件长条，你会看到它们每个都带有红色小三角。点击其中一个紫色事件长条，Devtools在Summary面板里展示了更多关于这个事件的信息。确实，这里有很多reflow的警告。
  • 在summary面板里点击app.js:70链接，Devtools会跳转到需要优化的代码处

应用面板

应用面板

  • 如果使用本地存储存储键值对 (KVP)，则可以从Local Storage 窗格中检查、修改和删除这些 KVP。

  • Session Storage 窗格与 Local Storage 窗格，cookie的窗格的工作方式相同。

安全面板

  • Security Overview：安全页面会通过消息 This page is secure (valid HTTPS). 指示。
  • 点击 View certificate 查看主源的服务器证书。 非安全页面会通过消息 This page is not secure. 指示。
  • Security 面板可以区分两种非安全页面。 如果请求的页面通过 HTTP 提供，则主源会被标记为不安全。
  • 如果点击非安全源，Security 面板会提供 Network 面板过滤视图的链接。
avatar
文章
阅读
粉丝