876d7f57beb8a0b89fb02b4143f8c627
WWDC2020 10646 - What's new in Web Inspector

本文提到到 inspector 等价于 web inspector

inspector 是 web 开发中主要的调试工具,可以调试 web 页面、调试通过 JavaScriptCore 执行的 JS 代码、调试 web 离线化的页面。总之,无论对于 web 开发者还是 iOS 开发者,都离不开 inspector。对于纯 web 开发者来说,Chrome 是他们的首选,而对于 iOS 开发成员来说, safari inspector 是需要掌握的调试技巧。WWDC2020 中对 inspector 进行了改造升级,利用这次机会整体聊一聊 inspector,inspector 中包含的内容如下图:

启动 inspector

对于不同的开发场景启动 inspector 的方式会有些许不同,不过首先需要显示出 develop 菜单,很多场景都会用到,启动方式:打开 safari - Preference - Advanced - 勾选 Show Develop menu in menu bar 。

1、调试 web 页面

可以直接在 develop 菜单中点击,Show Web Insepector,也可以在网页中右击,选择 Insepect Element。

2、调试通过 JavaScriptCore 执行的 JS 代码
需要选择当前执行 JS 代码的机器,可以是模拟器,也可以是真机。

Resources

这个菜单用来显示当前网页中加载的资源,比如 HTML、JS、CSS、图片、字体等资源文件,并且可以对 JS 代码添加断点来调试代码。这次主要做了以下几点优化:

1、断点

Inspector 中的断点调试和 Xocde 的大同小异,这次新增了多个全局调试断点,比如 all timeout、all invervals、all animations Frames。并增加了单步执行调试按钮(step)。

2、格式化代码

web 页面中的 JS、CSS、HTML 文件大多数都经过了压缩处理,以前 inspector 并不支持 HTML,这次可以格式化 HTML 文件了:

3、Local overrides

如果你想调试某个文件的时候,通常把改动好的代码推动服务端,然后通过浏览器访问,查看效果,整个过程可能会耗费很长时间。Local overrides 提供了一种能力,可以替换当前页面所加载的文件,这样只需要修改本地文件即可,当页面加载的时候会直接使用本地的文件,达到快速调试的作用。更多内容

4、Bootstrap Script

Bootstrap Script 也叫引导程序,通常是程序执行时第一个要执行的文件,在 Inspector 中可以创建一个这样的文件用来作为调试工具使用,比如替换某个函数的实现,给某个函数增加特殊的调试语句。在调试的时候,很多 JS 函数都经过了压缩处理,可通过这种方式把压缩的函数替换成未被压缩的函数,方便调试。
更多内容

Timelines

Timelines 用来分享各种功能的加载时长,这次新增了 Animation 的统计,比如 CSS Animation 和 CSS Transition。

top Created with Sketch.