Author: Lefex, iOS/ front-end developer, currently working for Baidu, responsible for iOS and front-end project development, is writing a front-end multimedia e-book through the public account “Suyan”


This article mentions inspector as equivalent to Web Inspector

Inspector is a major debugging tool for Web development. It enables you to debug Web pages, JAVASCRIPT code executed through JavaScriptCore, and offline Web pages. Inspector is a must-have for web developers and iOS developers alike. For web-only developers, Chrome is the top choice, and for iOS developers, Safari Inspector is a debugging skill to master. Inspector has been reformed and upgraded in WWDC2020. Take this opportunity to talk about inspector as a whole. The contents contained in Inspector are shown as follows:

Start the inspector

The inspector will start in a slightly different way for different development scenarios, but first you need to display the Develop menu, which is used in many scenarios: Open safari – Preference – Advanced – check Show Develop menu in menu bar.

1. Debug the Web page

You can either go to the Develop menu and click Show Web Insepector, or right-click on the Insepect Element from the Web page.

2. To debug JS code executed by JavaScriptCore, you need to select the machine that is currently executing JS code, which can be a simulator or a real machine.


This menu is used to display the resources loaded in the current page, such as HTML, JS, CSS, images, fonts and other resource files, and can add breakpoints to the JS code to debug the code. This time, we mainly optimized the following points:

1, the breakpoint

Breakpoint debugging in Inspector is similar to Xocde, with several new global debug breakpoints, such as All Timeout, All Invervals, and All Animations Frames. A step debug button (STEP) was added.

2. Format code

Most of the JS, CSS, and HTML files in web pages are compressed. The Inspector did not support HTML in the past. Now you can format the HTML files:

3, the Local overrides

If you want to debug a file, you usually push the changed code to the server and then access it through the browser to see the effect, which can take a long time. Local Overrides provides the ability to replace the file loaded on the current page, so that only the Local file needs to be modified. When the page is loaded, the Local file will be directly used to achieve the function of fast debugging. More.

4, the Bootstrap Script

In Inspector, you can create a Bootstrap Script and use it as a debugging tool. For example, you can replace the implementation of a function or add special debugging statements to a function. During debugging, many JS functions have been compressed. In this way, the compressed function can be replaced with an uncompressed function, which is convenient for debugging. More content


Timelines is used to share the loading time of various functions. This time, Timelines has added Animation statistics, such as CSS Animation and CSS Transition.


Storage is used to display cached data, such as Local storage, Session storage, Indexed DataBase. This time the main new search function, edit function. For example:


This is a new feature that displays all Web Animation, CSS Animation, CSS Transition, and Cavans. You can see the parameters of each animation in detail as shown below:


Layers is used to display the drawing and layout of the page. This time, we upgraded Layers to make it easier to operate:


The console is where the logs are printed and JavaScript code can be executed. The Console interface is as follows:

There are two new apis:

1, queryInstances ()

This is used to find out how many instances a class currently has in memory. Like the following code, find Pet instance, find Animal instance.

2, queryHolders ()

Find how many strong references an instance has, that is, who is currently using the instance. In this example, John was strongly referenced by Alice. You can find out by whom John was strongly referenced through queryHolders API.


apple webkit

What’s new in Web Inspector

Limited welfare

This article is from WWDC20 Inside Reference. I recommend this column here.

The “WWDC Insider reference” series was initiated by the veteran Driver Weekly, Knowledge Collection and SwiftGG technology organizations. We’ve been doing it for a couple of years, and it’s been good. It is mainly for the annual WWDC content, do a selection, and call on a group of front-line Internet iOS developers, combined with their actual development experience, Apple documents and video content to do a second creation.

There are 213 sessions this year. WWDC20 Insider selected 135 of these sessions and produced 83 articles in just two weeks. It is on sale for a limited time, only 9.9 yuan, very special.

Read the article is not satisfied with the friends, pay close attention to subscribe to WWDC20 internal reference continue to read ~

Pay attention to our

We launched LSJCoiding, a weekly newsletter for veteran drivers, which is called a welcome update to each issue.