Wisdom is better than weapons of war: but one sinner destroyeth much good.
Ecclesiastes 9:18
Of course when researching the behavior of a web page, the Elements section should come first. We can select an item from the web page by clicking on the small arrow at the far left of the Inspector’s bar or by pressing the keys Ctrl + Shift + C. All of the things listed are Document (the current web page) elements, according to the DOM (Document Object Model). When you point to an element with the mouse pointer, a context menu appears with its data at the top. You can also select a specific element from the Elements tab, and its visual representation will be colored even when the element is pointed at. If you get lost in the page code, you can always right click on an element and select “Scroll in the view” and you will be directed to the appropriate element on the page.
Capture screenshot
You can use the screenshot option to compare the differences between the original version of the page and future edits. Call up the command menu with Ctrl + Shift + P and type “Capture”. Several choices will be provided:
- Capture area screenshot.
- Capture full size screenshot.
- Capture node screenshot.
- Capture screenshot.
Choose a suitable one according to your requirements.
Show rulers
Quite a handy tool for measuring distances between elements. To turn on the ruler press Ctrl + Shift + P and type “Show rulers”. Enable/Disable it from the context field. Measurement units are in pixels.
Editing the Document
The inspector allows editing of elements and their attributes.
For this example, I will open the front page of a popular news website and select the photo of the leading article.
Popular news website main article picture selected
The characteristics of the “image” element appeared in the small window above. These are the classes presented in this element.
HTML “img” element selected
Elements Styles
If you look at it on the right you will see the properties of the elements and the assigned classes.
Styles window in the Developer tools
I will now increase the width of the photo by changing the “width” property of the class W\(100\%\).
#atomic .W\(100\%\) {
width: 150%;
}
The result is visible. In the same way, you can change the properties of elements on each page, you can even hide or delete an element from the page. Highlight the item and press the Del key to delete.
Popular news website main page picture resized by 150%
Edit an element
To edit an entire element of the node tree, right-click on the element and select “Edit as HTML” or press functional key F2. The element code will expand into a convenient text area for editing. For example, we can completely replace one element with another, keeping the attributes.
Editing HTML element
Find elements, attributes and properties
You can search for an item by its ID. In CSS, it is mandatory to prefix identifiers with the “#” sign.
In our example, the image resize will only work for an element that has said selector class “W\(100\%\)” and is contained in an element with an “atomic” identifier. How to find out which element is “atomic”?
To search for a string, element, selector or XPath in the Inspector, press Ctrl + F. A search box will appear at the bottom of the Inspector window, type the word you are looking for and the occurrence will turn yellow and the number of occurrences of the word will appear in the source code of the page.
Search in Developer tools Inspector
The “atomic” identifier belongs to the HTML element “html”, which contains all other elements of the web page, therefore all elements containing a selector “W\(100\%\)” can be resized.
You can search also by HTML tag attributes. The attributes are defined in name/value pairs like: name=”value”. For example if you want to find every hyperlink which opens in new tab use the following syntax in the search bar:
a[target="_blank"]
Another example to search using XPath for a subsection “ul” inside any “div” container:
//div/ul
The two slashes means that do search inside the all DOM tree. You can also auto generate XPath query from the Developer tools. Right click on a element in the source code. From the context menu select Copy -> Copy XPath. The XPath query is now in the clipboard. For example this is the main article image XPath query:
//*[@id="applet_p_50000313"]/div/div/div[1]/div/div/a/div[1]/img
Find an element from the Console
Developer tools provides shortcut for accessing DOM node from the Console. To mark an element from the console:
- Select an element on the page and right-click “Inspect”.
- Press the Еsc key to open the Console Drawer.
- Type $0 and press the Enter key.
- The result of the expression evaluates $0 to the currently selected element.
Comments