====== Browser Developer Tools ======

Whenever you work with HTML code, CSS or [[:en:create:javascript|JavaScript]] to further customize the questionnaire to your needs, the developer tools in the browser are a great help.

Depending on the browser, you will find the developer tools in different places:

  * Firefox: Sandwich symbol (≡) -> Additional Tools -> Tools for Web Developers -> Inspector
  * Chrome: Extension points (⫶) -> Additional Tools -> Developer Tools -> Elements
  * Edge: Extension points (⋯) -> Additional Tools -> Developer Tools -> Elements

All three browsers allow the key combination Ctrl + Shift + I (letter i) under Windows to open the developer tools.

You get the HTML code of the page displayed there, which is not really clear at first sight. But with the selection tool you can select individual elements of the questionnaire page directly.

{{:de:general:scr.browser-tools.png?nolink|Entwickler-Tools im Browser}}

So you can easily find out the HTML ID of an element, the relevant CSS classes and the parent HTML elements. You can also see which CSS rules are responsible for the element's current formatting on the right. You can also adjust them on a test basis to directly try the effects of possible changes.

----

Search terms: Error console, browser console, developer console, developer tools