Chrome 75 开发者工具新特性

930 阅读2分钟
  • 文档说明
    • 作者:西楼听雨
    • 禁止转载
    • 本文同时发布于幕布平台:https://mubu.com/doc/7FnUFrgDKM
  • 新特性一:增强了自动补全功能
    在自动补全需要传入参数的 CSS 函数时,将会给出一个有意义的参数值作为参考,这样我们就可以实时预览这个值对 DOM 节点的作用效果
    • Chrome 75 之前的效果
    • Chrome 75 之后的效果
  • 新特性二:新增 Clear Site Data 命令
    我们可以直接在命令菜单(Command Menu)中通过该命令清除与当前站点相关的所有数据(包括:localStorage、sessionStorage、IndexedDB、WebSQL、Cookies、Cache、Application Cache、Service worker)
    • 按 Control+Shift+P 或者 Command+Shift+P (Mac) 打开命令菜单,然后执行 Clear Site Data 命令:
  • 新特性三:支持查看当前页面中的所有(包括 iframe 的)IndexedDB 数据库
    在 Chrome 75 之前是不能查看 iframe 中的 IndexedDB 数据库的
    • Chrome 75 之前的效果
    • Chrome 75 之后的效果
  • 新特性四:在 Network 面板中,当鼠标悬停在某条请求的 Size 列上时,在悬停的 tips 中将新增展示该资源未经压缩的体积信息
    在 Chrome 75 之前,只能在大行视图中查看到未经压缩的体积
  • 新特性五:在断点面板中将列出所有行内断点
    • Chrome 75 之前的效果
    • Chrome 75 之后的效果
      • 每个行内断点都可以在右侧的断点面板中单独进行管理
  • 新特性六:在 IndexedDB 和 Cache 面板中,将在状态栏展示当前数据库/缓存的条目数量
  • 新特性七:新增设置项,以支持禁用详细的 Inspect 提示
    • Chrome 73 时引入了详细的 Inspect 提示气泡
    • Chrome 75 中可以通过设置项来禁用这个详细提示
      • 设置项路径: “Settings > Preferences > Elements > Show Detailed Inspect Tooltip”
  • 新特性八:新增设置项,以支持是否在 Sources 面板的编辑器中启用/关闭 Tab 键缩进
    在 Chrome 75 之前,如果你用键盘的 Tab 键导航进入了编辑器中,就无法再通过 Tab 键跳出编辑器了,因为 Tab 键在编辑器中的行为是对代码进行缩进​
    • 设置项路径:Settings > Preferences > Sources > Enable Tab Moves Focus.