Chrome 62 开发者工具新特性

  1. Console 支持 await 操作
  2. 页面截屏功能（2种）
    • 利用鼠标框选
      1. Windows 下按下 Ctrl + Shift + C
      2. 按住Ctrl，鼠标直接在页面上框选
      3. Chrome会把截图下载下来
    • 截取指定元素
      1. 在开发者工具的 Elements 中选中需要的元素
      2. 按下 Ctrl + Shift + P
      3. 在打开的 Command 中输入 node
      4. 在下拉候选项中选择 Capture node screenshot
      5. 开始下载
  3. 高亮 CSS Grid
    当 DOM 的 CSS 样式中有 display:grid 时，会高亮显示
  4. 新的查询（query）API
    • queryObjects(Promise). 返回所有的 Promises.
    • queryObjects(HTMLElement). 返回所有的 HTML elements.
    • queryObjects(foo), 假设 foo 是一个类，则返回所有 foo 的实例。
  5. 新的 Console 过滤规则
    • -<text> 过滤掉包含text的信息
    • url:<text> 只显示脚本url中包含text的脚本输出的信息
  6. 可在 Network 中直接导入 HAR 文件
  7. 在 Application 中预览 cache
  8. cache 更灵活的调试
  9. Coverage 加入块级作用域
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 134,854评论 18赞 139
  • 常用的前端调试工具
    在做前端开发时，我们需要用到一些调试工具用来调试我们的HTML、CSS或者JS代码，俗话说预先善其事必先利其器，这...
    Rella7阅读 24,034评论 0赞 15
  • Chrome Dev Tools---[基础篇]
    Chrome Dev Tools 是每一位前端工程师开发调试的必备利器，称之为FE的瑞士军刀也毫不为过。然而，每每...
    擦柱而出阅读 1,044评论 0赞 3
  • 爱情那么难遇到的东西。
    兴许是到了适婚的年龄， 我耳边常常会有这样的声音： “找男朋友（老公...
    一只小远远阅读 507评论 0赞 0
  • 读《成功与运气》有感
    在人生的早期关键节点上，好运气对后续的成功有很大的放大效应，而且这种运气效应可以一直累加。 1. 如果你认为精英们...
    记忆似雨亦如烟阅读 272评论 0赞 0