Chrome 65 DevTools 新功能

参考: https://developers.google.com/web/updates/2018/01/devtools
Chrome更新很勤快,65又出了几天了。

本地覆盖

过去如果我们的服务器在本地(本机,localhost)的话,chrome可以支持在devtools里面映射到本地文件夹然后直接修改代码,就像是个IDE。但是如果是远程服务器就不行了。现在有了这个本地覆盖的功能,我们也可以假装修改远程文件来调试啦。这感觉有点像fiddler。

步骤

  • 打开devtools ==> Sources然后左上角选择Overrides
  • 点击 select folder for overrides,选择一个本地文件夹。
    这里写图片描述
  • 注意此时浏览器会问你要不要允许chrome访问本地文件夹。选择“允许”
    这里写图片描述
  • 然后就可以修改html css什么的了

局限

  • 只能在“sources” 面板里面改

“Changes” Tab

现在可以看到你在devTools里面做的修改记录了。
这里写图片描述

无障碍(Accessibility)窗格

这个新功能出现在Elements 页面
这里写图片描述

颜色选择器对比度

现在修改css颜色的时候可以看到对比度了。
这里写图片描述

其他

  • 新的审计(Audits)工具SEO
  • 调试时Step Into 可以进入异步代码(比如不同线程间发送消息,settimeout)
  • 性能(performance)面板可以临时记录5个记录
发布了20 篇原创文章 · 获赞 9 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/time1812/article/details/79564891