— Inspect the DOM of Your Page —
At the bottom of the Preview window is a button that displays the Inspector tool. The icon looks like this:
When you click on the button, the Page Inspector tool is displayed.
The Page Inspector allows you to inspect and modify the Document Object Model (DOM) of the page being viewed in the Preview window.
The DOM is a memory-resident version of the page that you have composed using HTML. Sigil parses the HTML file and creates a tree structure in memory that represents the information you have entered into the HTML. The Preview Page is actually displaying what is in the DOM.
If you are interested in learning more about the DOM, you can find those details at:
https://www.w3schools.com/js/js_htmldom.asp
Since the DOM is a memory-resident version of your page, you can change it on the fly and see the results immediately in the preview.
The Inspector allows you to inspect and modify the DOM as you like. That makes it possible for you to change the contents of the page, and/or the style sheets and see the results of those changes immediately in the preview.
Since you are changing only the DOM in memory, none of the changes that you make in the Inspector will change your HTML file.
When you first open the Inspector, the DOM tree shows two
nodes with arrows,
, pointing to the right, as you can see in the previous figure.
There is one for the <head> tag and one for the <body> tag.
If you click on one of the arrows, the tree
expands so show the contents of that node, as shown below.
In the figure above, you can see that the <body> tag has been expanded to show the contents of the body. Clicking successively on the arrows allows you to dig down through the tree of nodes.
When you select one of the tags in the tree, the window on the right hand side displays the style information about that node.
You can see that the styles applied to that node are shown in the Styles panel. Of particular interest is the figure in the lower right hand corner of the Styles panel. That is called a Box Model.
The box model shows the values of position, margin, border, padding and contents of the node. The units of the numbers shown are pixels. So you can tell from the image above that the selected paragraph has a top and bottom margin of 16 pixels, no border, no padding, and is 288 pixels wide and 72 pixels tall.
Another way that you can select a node for inspection is to use the Element Tool, which allows you to select the desired node in the Preview panel. Activate the Element Tool by clicking the button in the upper left corner of the Inspector window, indicated by the mouse cursor in the figure below.
Once you have activated the Element Tool, you can select the desired element in the Preview panel. The elements in the Preview panel are highlighted as you track the mouse cursor over them.
Simply click on the highlighted element. Once you have selected a node in the Elements tree, you can make changes to its contents and styles and see the effect of those changes immediately in the Preview window. In the figure below, I have changed the style for the paragraph tag to add the color: red.
You can see immediately in the Preview window that all the paragraph tags show the text in red.
You can change the contents of the node as well. Double-click on the contents of the paragraph to select it.
Enter the new text to see it change immediately in the Preview window.
Remember, since you are changing only the DOM in memory, none of the changes that you make in the Inspector will change your HTML file.
Another feature of the Inspector is the Console, which interprets JavaScript commands.
Once you have selected a node in the inspector tree, you can access it using normal JavaScript commands in the Console. The Console can be activated by switching to it with the Console tab.
That results in the Console taking over the entire Inspector window.
You can also place a Console panel beneath the Elements panel by typing the Esc key.
The currently selected node in the Elements panel is accessed using '$0'. The node that is accessed using $0 is indicated in the Elements panel where the tool has appended '== $0' to the line of text that is selected.
In the previous figure of the Console, you can see that I have typed '$0' into the Console, and it is displaying the the contents of the selected node. Clicking on the arrows in the Console allows you to dig down into the node that is displayed.
You can use $0 to access and traverse the DOM tree as you normally would with JavaScript commands. For example you can access the parent of the selected node by typing $0.parentElement. As you enter the command, autocompletion popups are displayed to help you.
You can use the mouse to select the desired method from the menu, or you can type the Tab key to finish the selection by accepting the highlighted element.
You can see in the following figure that the parent of the selected paragraph node is the <body> node.
Once again, you can use the arrows in the Console output to dig down into the node that you are inspecting.
One last tip for using the JavaScript console is that the Inspector tool keeps a history of selected nodes. The most recently selected node is accessed using $0, and the node selected before the current selection is accessed as $1. In the figure below, I first selected the paragraph node, and then I selected the image node. So $0 refers to the image node, the most recent selection, and $1 refers to the paragraph node, the previous selection.
Cascading style sheets are also supported in the Inspector. The Styles panel provides information about cascading styles.
In the figure above, the cascading styles are shown with information about the source of each style. The styles that are crossed out with a line through them, have been superseded by the other styles in the display.
This tutorial is only a brief overview of the features of the Page Inspector. More details can be found at Google Chrome Developer Tools Documentation