本文主要是介绍【WWDC20】10646 - What's new in Web Inspector，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

作者：Lefex，iOS/前端 开发者，目前就职百度，负责 iOS、前端项目开发，正在通过公众号《素燕》写一本前端多媒体电子书

Sessions: developer.apple.com/videos/play…

本文提到到 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。

Sotrage

storage 用来显示缓存的数据，比如 Local Storage、Session Storage、Indexed DataBase。这次主要新增了查找功能，编辑功能。比如下图中修改 Cookie：

Graphics

这个是这次新加的一个功能，用来显示所有的 Web Animation、CSS Animation、CSS Transition 和 Cavans。可以详细地看到各个动画的参数，如下图：

Layers

Layers 主要用来显示页面的绘制、布局。这次对 Layers 进行了升级，更方便地操作：

Console

console 就是打印日志的地方，也可以执行 JavaScript 代码。Console 的界面如下：

这次主要新增了 2 个 Api：

1、queryInstances()

这个用来查找一个类目前在内存中有多少个实例。比如下面的代码，查找 Pet 的实例，查找 Animal 的实例。

2、queryHolders()

查找某个实例有多少个强引用，也就是谁目前还使用着这个实例。例子中的 john 被 alice 进行了强引用，可以通过 queryHolders 这个 api 查找到 john 被谁强引用了。

参考

apple webkit

What's new in Web Inspector

限时福利

这篇文章的内容来自于 《WWDC20 内参》。在这里给大家推荐一下这个专栏。

「WWDC 内参」系列是由老司机周报、知识小集合以及 SwiftGG 几个技术组织发起的。已经做了几年了，口碑一直不错。主要是针对每年的 WWDC 的内容，做一次精选，并号召一群一线互联网的 iOS 开发者，结合自己的实际开发经验、苹果文档和视频内容做二次创作。

今年一共有 213 个 Session 的内容。《WWDC20 内参》挑选了其中的 135 个 Session，短短两周，已经创作了 83 篇文章。目前正在限时优惠销售，只需要 9.9 元，十分优惠。

看了文章还不过瘾的朋友，抓紧订阅 《WWDC20 内参》 xiaozhuanlan.com/wwdc20 继续阅读把~

关注我们

我们开通了公众号「老司机技术周报」，每期发布时公众号（LSJCoiding）会推送消息，欢迎关注。

这篇关于【WWDC20】10646 - What's new in Web Inspector的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！