Tutorial - Using Safari Debugger
Using the developer tools in the Develop menu in Safari on Mac
By Thorium Builder Team - November 2020
When trying to add custom code to your application or web project, the danger is that a single syntax error can put the whole project in an unstable state and interfere with its proper functioning. It is therefore essential to verify that the code is executed without error using the browser debugger. You can use a debugger under Google Chrome or Safari, here we will see how to use the Safari debugger.
Enable the Safari debugger
In order to activate the Safari debugger, choose Safari > Preferences, click Advanced, then select “Show Develop menu in menu bar”.
Once you have activated the developer menu, it appears in your menu bar:
Running your project with Safari
In order to run your project in Safari without a web server, you need to go to the project folder (Macintosh HD / USers / YourName / Sites / ProjectName) and launch the index.html file with Safari.
If you don’t use a local Web server, then the projects will run with the file:// protocol, and you have to configure 2 additional options in order to make it run correctly.
Mobile Application use requests to load the code of secondary pages, they work with a SPA (Single Page Application) mode, Safari will not allow this type of operation locally, you must allow it by selecting the following options in the Developer menu:
Disable Local File Restrictions
Disable Cross-Origin Restrictions
Once these settings are enabled, you can run your apps in the browser and access the Debugger
You will find a complete description of the possibilities offered by the Safari Developer menu at this address: https://developer.apple.com/safari/tools/
The Safari Development Environment gives you access to a lot of debugging functions, we won't list them all here, but let's see the most useful:
Tracking JavaScript errors in the console
By clicking on the "Show javascript Console" menu, you will have access to a screen displaying all the javascript errors triggered during the execution of your project.
By clicking on the "Show javascript Console" menu, you will have access to a screen displaying all the javascript errors triggered during the execution of your project.
Note that some errors are minor and will not affect the operation of the project, others can be blocking and stop execution.
Example of invalid function in javascript Console
Important
If you modify your code continuously, you will have to empty the Safari cache regularly and refresh the page
Using Breakpoints and inspecting variables
It is also possible to temporarily stop the execution of the code and check the value of the variables. For example, imagine that you have added a function in the custom.js file of your project, and that you want to inspect how it works: select the Sources Tab, and find your custom.js file in the list on the left, then select the line to which you want to add a Breakpoint by clicking in the area with the line numbers:
The Breakpoint will appear with a blue arrow
From now on, each time you run your project, the execution of the code will stop and display the values of all the variables that are not available. In our example, we can for example inspect the value of the variable "d":
To continue the execution, you can use the command buttons on the left:
Using the Web Inspector
Another very useful function is the Web Inspector. This allows you to select an element in your page and to inspect the assigned css styles.
1: Activate-Deactivate the Web Inspector
2: Selected Element in your HTML Code
3: CSS Inheritance Tree: you can change dynamically the values (it won’t be saved in your code)
To discover more features of the developper menu, see the Safari doc: https://developer.apple.com/safari/tools/
