WebKit WEB Inspector increase coverage analysis and type inference capabilities

The Web Inspector (Web Inspector) in WebKit is mainly used to view the page source code, the real-time DOM hierarchy, script debugging, data collection, and so on, and has recently added two useful new features: Coverage analysis and type inference. The Coverage analysis tool can visually and accurately display the parts of the JavaScript program execution. The type inference tool allows you to visually annotate important variables with type information. These two features make it easier to understand and debug JavaScript programs in Web Inspector, and the programming experience has been greatly improved.

Coverage Analysis features
Understanding how a program works is a complex and tedious process, and you need to know what parts of the program are executing in a particular input situation. In Web applications, it is often necessary to care about the part of the program that the user interacts with. The WEB inspector can now accurately display the parts of the program that are running and those that are not running.

Similarly, when you understand the control flow of a program, you must know which functions are being executed and even need to go deep into the If-then conditional branch inside the function. When looking for a bug, it is generally necessary to monitor the execution of a certain program, which is also the only way to coordinate the entire program engineering function modules. The Coverage analysis tool can help programmers identify details in the program.

Type inference Functionality
JavaScript type inference is another exciting new feature in Web Inspector. All variables in JavaScript have types, but when reading JavaScript code or functions it is difficult to know at a time what type a variable belongs to. The type-driven tool can now solve problems in navigating JavaScript programs that make it difficult to determine the type of important variables.

JavaScript is a dynamic type language and does not require a type declaration when writing a JavaScript program compared to statically typed languages such as Swift, Haskell, and so on. As a result, any variable or expression in a JavaScript program can be any type, and a function can return any type of value. Statically typed languages can avoid confusing mismatched types, and when the Type Checker finds type-matching errors, the compiler does not compile. JavaScript does not have this limitation, as long as the JavaScript program does not have a syntax error, it can be compiled. For example, in a statically typed language, you can't assign a number to an array variable, but in JavaScript. Small examples like this kind of mismatch seem to be easy to avoid, but when JavaScript programs become large and complex and have more and more classes, it is difficult to record all the possible types, and inevitably there will be mismatches. Although JavaScript is not a statically typed language, its variables usually only have a specific type (a single state greatly facilitates the JIT compiler to successfully optimize the JavaScript program), and JavaScript programs often produce errors because of unpredictable types of leaks. There are many examples to illustrate this lack of mandatory type protection of the drawbacks, not listed here.

The type inference feature of Web inspector makes it quicker and easier to find and solve such problems. Type-related errors are sometimes easy to locate, and the type mismatch will report a run-type error. However, in most cases, type mismatch is not an error, and it can be difficult to locate or even reproduce. The type inference tool can then assist in effectively finding such tiny errors. When type inference is turned on in Web inspector, the JavaScript program displays type hints next to important variables and functions. Programmers can browse the JavaScript program directly, do not need to load the Console.log file or pause during the debugging step. The type inference tool is ideal for reverse lookup type-related errors. As the name of the type inference function itself, it is simply inferred from the data types that have occurred in the program. It does not have a 100% certainty that the correct type of variable is displayed, nor can it be based on existing information for type prediction. In addition, the type inference tool is updated in real time. When new information is added to the program, it updates the comment. Using type inference tools can help programmers better grasp the context of the program and help them better familiarize themselves with the new code.

Supplemental Instructions for compiling
The type inference feature is highly integrated with the JavaScriptCore's JIT-compiled schema, showing the workflow flowchart of the JSC compiler.

JSC First parses the JavaScript code into an abstract syntax tree (ast,abstract Syntax tree) and then generates bytecode. Next JSC will translate the bytecode and collect analysis information in the Llint (Low level interpreter). If a function has performed enough time, JSC will compile this part of the bytecode directly into machine code in baseline, and if the function continues to execute multiple times, JSC will be optimized with DFG and FTL JIT. Because the type inference information is compiled into the JSC bytecode, the JSC can be called after the multi-layered compiler optimizes the type inference. If you do not optimize, debugging with the type inference tool can become unusually slow. Detailed details of the optimization process can be found in the official instructions.

WebKit WEB Inspector increase coverage analysis and type inference capabilities