Use the full potential of existing auxiliary tools of your browser: For some problem analysis, sometimes the conventional data is not sufficient and further details are needed. Often additional tools are used to obtain detailed information.
However, it is not always necessary to install additional software, often very useful tools are already available (built-in).
Some of these tools, which we would like to present to you today, are the webdeveloper tools (devtools) of the browser, which can be used by pressing a button. These tools are available in the following browsers: Google Chrome (F12), Mozilla Firefox (F12), Microsoft Edge, Vivaldi (F12) and Opera (CTRL+Shift+i)
In the GIS environment these tools are mainly used in the use of WebGIS technologies, i.e. everything that has a web server or an interactive user interface.
We are going to show you three example cases using the Webdeveloper tools, which you can try out yourself.
If map services are loaded online, the overall view consists of many individual elements, such as image, text and configuration files. To check which elements are loaded in which time, the web developer tools provide the “Network” tool.
To do this, press the F12 key and switch to the “Network” tab. As soon as you reload your current page, all elements appear in a list view.
Picture: Example of loaded elements of a GEONIS Datashop
The elements in the listing can be inspected individually for further details. In addition, the items listed can be grouped and filtered by file type.
It is also possible to view the headers of requests. This is especially useful when form data is sent or parameters are passed.
Example: Header of a PDF print in WebOffice
Example: Server responses in detail of a PDF print in WebOffice
By means of webdeveloper tools you can also analyze the loading times of your WebGIS project. Here the total time from call to complete setup is measured, as well as the times of the individual sub-elements. Thus, for example, bottlenecks can be identified faster and better. Record a few requests of your desired web project and display the response times including screenshot history (film strip).
Example: Performance details of a WebGIS project.
For the gradual build-up of the website, individual screenshots can be created automatically, so that the loading process can be followed frame by frame.
Example: Performance Analysis with Filmstrip
If you are unsure how your WebGIS project will be displayed on a smartphone or on a tablet, the WebDeveloper tools allow you to simulate various views with different devices.
Switch to the mobile view with the keyboard shortcut CTRL+Shift+m
You can choose from predefined tablet and smartphone models, mouse pointers and touch simulations, as well as switching between portrait and landscape format.
Example: Device selection for simulation
Furthermore, the different bandwidths can also be tested in order to test the card structure, for example at low Internet speeds.
Example: Bandwidth selection
These are just three of the countless functions that can be used for analysis and testing. It is therefore worth using the F12 key to open the Webdeveloper tools more often, not only for problem analysis.
- The examples refer to the respective browser versions from January 2020
- Microsoft Edge does not currently use the Chromium engine. Deviations are possible.
- Mozilla Firefox does not use the Chromium engine. Deviations are possible.
- Opera does not open the webdeveloper tools with the keyboard shortcut F12, but with CTRL+Shift+i. Shortcut can be customized.