工具

chrome devtool 调试工具

使用devtool调试检测web程序

Posted by page on March 29, 2021

chromeDevtool

核心工具

  • Element 编辑 HTML 和 CSS、查看事件侦听器的元素工具

  • Console 查看和筛选日志消息、允许运行选定窗口的 JavaScript 的控制台

  • Source 查看页面的源目录与文件，用于打开和编辑代码、设置断点、逐步执行代码

  • Network 网路日志，监视来自网络和浏览器缓存的请求和响应的网络工具，可查看资源响应时间花费

  • Performance 性能工具，页面运行中资源加载、渲染引擎、js引擎等各个步骤所需的时间和系统资源

  • Memory 内存查看 ，用于测量内存资源的使用，并比较代码运行时不同状态中的堆快照

  • Application 检查和管理cookie、storage等本地存储、indexDB数据库 和 cache缓存

  • Security 调试安全问题并确保网页上正确实现 HTTPS 的安全工具

  • Lighthouse 运行对网页的审核，捕获与使网页可访问性、安全性、性能高等相关的常见错误，为提高网站质量提供参考

Element

编辑

  • 增删元素：Edit as HTML 与 delete键
  • 更换元素位置：拖拽标签实现
  • 添加元素属性：双击标签头部tagName+Enter,
  • 快速隐藏元素：标签上悬停，H键按下会计

访问

  • 复制当前元素内容：copy -> element
  • 复制当前元素所有css样式代码：copy -> style
  • 复制当前元素的部分样式：copy all declarations
  • 复制js访问路径：copy -> Js path
  • 控制台快速访问指定节点
    • 选中标签，控制台$0变量即此节点
    • 选中标签，右键store as global,控制台自动将其赋予为全局变量

控制

  • 方向键浏览 DOM 树：上下移动，左右展开/闭合
  • 视图滚动到对应位置：元素悬停，右键Scroll into view
  • 搜索：Ctrl+F 不仅支持内容搜索，还有元素属性与style搜索
  • 中断js修改：右键Break on
    • 中断子树修改：subtree modifications
    • 中断属性修改：attribute modifications
    • 中断节点删除：node removal

Source

  • 将当前活动对象的变量加入watch：Local scope -> 右键 add to watch
  • 搜索文件源：Ctrl+P -> 输入文件名
  • 查看当前资源的Network状态：右键Reveal in Network
  • 将source的修改同步至源
    1. 点击Filesystem -> add Folder Webspace选择对应的本地源文件夹
    2. 在source修改代码，或在Element修改元素css样式都会修改源文件
    3. 修改完成Ctrl+S保存，此时刷新页面不会重置

Network

  • 强制刷新页面：开发者模式下，长按导航栏refresh图标
  • 捕获屏幕截图：network设置图标 -> Capture screenshots -> 强刷新页面
  • 搜索请求头/内容：Ctrl+F搜索框 -> 输入请求头字段
  • filter过滤框：输入文件名快速过滤处文件
  • 查看资源是否有被压缩：network设置图标 -> Use Large request row -> 刷新页面，查看前后资源大小是否一致

Performance

  • 进入无痕模式：Ctrl+Shift+N
  • 模拟低端设备：设置 -> cpu 4倍减速
  • 记录运行时性能：点击record开始记录，稍等一会stop停止
  • 查看FPS稳定：FPS栏可作为页面动画指标，出现红色条即帧率下降过低，绿色条越高即帧率越高
  • 查看cpu使用：cpu栏的颜色对应下方摘要的各个部分，CPU栏颜色越满则占用越多
  • 查看各点帧率：Frames部分，鼠标悬停在其中一个绿色方块上,将显示该特定帧的FPS，可能远低于60 FPS的目标。
  • 查找性能瓶颈
    1. 查看Sumarry中各部分占用时间，如渲染rending时间较长
    2. 查看Main栏的主线程上活动的帧图表。 x 轴每个条形表示一个事件。 宽条表示该事件花费了更长时间； Y 轴表示调用堆叠。 当事件堆叠在一起时，这意味着上面的事件导致了下面的事件
    3. task右上角的红色三角形，每当显示红色三角形时即显示一条警告，指出可能有与事件相关的问题
    4. 选择动画帧触发事件，下方显示时间的摘要与对应代码执行位置
    5. app.update事件下，放大下可看到紫色布局事件，可能有个红色三角形，实际上，存在强制重排(或其它)的警告。
    6. 点击布局时间的运行代码连接，即跳转到造成这一警告的原代码位置

控制面板(Ctrl+Shift+P)

  • 禁用js：搜索Disable js
  • 禁用css：
Array.prototype.slice.call(document.querySelectorAll("style, link[href][rel=stylesheet]")).forEach(e => e.parentNode.removeChild(e));
  • 禁用指定资源后测试页面：搜搜block，点击show blocking -> 添加阻止的资源文件名
CATALOG
    FEATURED TAGS
    JavaScript 类库 vue
    FRIENDS