Inspecting the DOM

Inspecting the DOM using the Chrome DevTools represents one of the most important exercises not only for debugging but also for development purposes. As mentioned, the Elements panel lets you access the resulting web page and inspect every single element and DOM, up to the extent of allowing you even to modify it, add new tags, or remove parts of it.

It's important to note that this will only be the resulting DOM structure of a web page at a given time: with different actions and events, the structure can and will always change. Furthermore, copy pasting the HTML code will not allow you to run a copy of the website locally unless you also download all corresponding CSS files.

In this example, we have visually selected a legend marker and the corresponding HTML tab is highlighted in the DOM:

In there, you can now also see the applied CSS styling on that particular DOM. By adding new styling options in on the right-hand side, within the element.style {} section, you can update the marker on the fly. This is a useful exercise to see how the styling is changed with certain settings, before adding it to your CSS file.

You can see many ng-repeats, ng-style, and ng-class directives in the DOM when inspecting a Qlik Sense app. That's AngularJS!

Furthermore, you can also directly fiddle with the HTML code: just right-click on it and it will allow you to move, remove, and update the elements and their attributes:

When developing visualizations for Qlik Sense, you'll very likely spend a lot of time on this panel working out issues, testing out new CSS styles, and debugging behaviors when users interact with your objects.

This is actually an interesting point with web apps. As your web browser is effectively the device which renders and executes the code on your screen, you have, in theory, full access to how the website is displayed for you. There are no secrets on the web, as they say, and as such it's very easy to copy templates, ideas, styling, and frontend development code.
Also, whenever someone sends you a screenshot of a website as evidence or proof, bear in mind it could always have been modified, just like the following updated Google page!

The following is a screenshot of how a google page and its source code looks like:

Screenshot of a google page and it's source code

Table of Contents for Inspecting the DOM

Create new playlist

Sign In

Sign Up

Table of Contents for
Inspecting the DOM