view and change html, css & Js
As long as web sites are unminified, their content can be viewed by anyone. Chrome’s developer tools simplify the action
First of all, check the version of Chrome — the following steps work on version 70.0.3538.67 running on a 64-bit Ubuntu workstation. Next, open the hamburger menu and click More Tools > Developer Tools. The browser responds by opening a pane on the left-hand side of your screen. It should be resized in the first step — by default, the browser doesn’t assign enough screen real estate. When done, the screen looks similar to the one shown in the figure. By default, Developer Tools starts up with the Console tab loaded. It contains the output emitted by invocations of the console-logging function. Rendering errors also show up there — if you find red lines, something is amiss in the markup or the code of your page. A click on the little ‘URL’ on the right-hand side brings you to the line, which caused the message to show up.
Inspect the mark-up
If your interest focuses on markup, use the Elements tab shown in the figure. It shows the markup the browser currently renders. You can expand and compact it in a fashion similar to a tree view — hide unneeded elements to prevent sensory overload. The raison d’etre of the tab is the display of the CSS structure. Widgets ‘collect’ CSS from various sources, which are displayed neatly and next to one another. In the case of the example shown in the figure, we see that styles were provided from both the ‘div’ tag and the ‘main’ markup of the page. Chrome lets you edit most attributes on the fly. Double-click any of the black texts to transform the label into an editor, then enter the newly desired value and press the Return key. The renderer picks up these changes and applies them to the DOM on the fly. This is especially useful when trying to optimise colours or placement issues; having to reload a page to preview changes becomes tiresome. Finally, take a look at the text box on top of the pane. It enables you to filter the markup items shown: for example, enter ‘mdc’ to limit the view to all styles inherited from the Material Design library used later in this article. When a filter is active, a yellow background shows up in a fashion similar to the one shown in the figure.
perform a detailed analysis
In modern web browsers, the DOM is not limited to ‘statical’ presentation issues. It also governs event flow and placement. Switch to the Computed tab to reveal a list of ‘dimensional’ properties. This is incredibly useful when arranging widgets on the screen in an exact fashion. Moving to the Event Listeners tab provides an overview of event flows. Use this feature to quickly weed out problems related to user interaction: if an event does not trigger, start out by checking the event handler connections. Finally, the Properties window lets you take a look at the attributes stored inside the individual DOM nodes. If you’ve ever spent a lot of time hunting down Dom-manipulating code, the value is clear.
A yellow background informs you that the content of the window are subject to filtering