lxq.link
postscategoriestoolsabout

Chrome DevTools Tips

Overrides

Overrides 功能能够非常方便的实现对源文件的修改和调试,它可以在页面加载之间,保留 Javascript 的更改,帮助你在本地浏览器解析源代码时,注入自定义的JS。

打开浏览器控制台,依次点击 Sources > Overrides > Select folder for overrides,这个操作会让你选中一个文件夹,之后修改后的源文件将保存在这里。Chrome 可能会向你询问文件夹的访问权限,如果询问,点击允许。

WX20220331-153251@2x.png

选中文件夹后的状态如下:

WX20220331-154903@2x.png

现在开始调试源文件

点击Page,选中 document (或 js 等其他文件) 添加一段自定义的代码,command(ctrl) + s 保存。

WeChat95a5efcb86cabb5f3d5ef4c5ce1501eb.png

保存后可以看到图标新增一个紫色原点,这个代表保存成功。

查看之前选中的文件夹,会发现多了一个刚才修改的文件。

WX20220331-155550.png

在之后的页面解析流程中,Chrome 解析会用当前保存的文件代替远程加载的文件。

刷新网站,可以看到控制台已经有了新增的JS代码输出。

WX20220331-155944@2x.png

如果想停用 Overrides 功能,可以在该标签栏下取消勾选或者点击清除。

WX20220331-160405@2x.png

Filesystem

Filesystem 可以让你的Chrome浏览器变成成一个简单的文本编辑器。

使用时首先需要添加一个文件夹,文件夹访问权限和Overrides差不多。

WX20220331-160808@2x.png

WX20220331-161012@2x.png

Screenshot

全屏网站截图是常见的需求,在Chrome 开发者工具能够轻易的实现。

WX20220331-162517@2x.png

在 DevTools 点击右上角的小圆点图标选择 Run command 或使用快捷键 command + shift + P。在输入框内输入 screenshot,可以看到 Chrome 提供了四种截图模式。

WX20220331-163840@2x.png

其中 Capture area screen screenshot 可以实现选中区域截图,Capture node screen screenshot 可以实现对选中的页面元素截图。

点击 Capture full screen screenshot,就可以获取到完整的屏幕截图。

WX20220331-163508@2x.png

Chrome 的 Headless 模式也能够实现全屏截图

2022-04-09