Preface
Goal: Explaning how to inspect HTML document.
This is also should be, an easy task to do. But I found that many beginner don’t know how to examine HTML, and of course change stylesheet behaviour. So I decide to make this short article, using our last example.
Other Browser Tools
This is a must have knowledge
Before inspecting Element consider see built tools that your browser might have have.
First, open the previous example, using browsersync
in localhost:3000
.
Source Code
If you are using Firefox, you can press Ctrl+U
to show source code.
This is very useful if you work with backend or SSG (static site generator).
Chromium has similar feature.
Meta
If you are using Firefox, you can press Ctrl+I
to show meta header
.
This looks silly when you have a few meta,
but you are going to need this feature,
once you had many meta such as opengraph
, twitter
and such SEO stuff.
Inspect Element
You can open inspect element
from context menu.
And you can either dock the inspect element
within the browser,
put let the inspect element
be separate window.
HTML
Consider see the result if click the red alert
,
and inspect the element.
Stylesheet
One of the most useful thing in element inspector
is,
we can change the stylesheet behaviour in a live page.
It means, we don’t need to change the source code.
Nor we need to refresh the page.
Consider have a look at the source code of the previous example:
.red {
color: #fff !important;
background-color: #f44336 !important;
}
Now consider changing the value in inspect element.
Change the color of the text of the red alert
,
from white fff
to yellow ff0
!
And see the result as below:
Javascript
How about the Javascript?
Remember the old days when people use pop-up alert( ... )
?
Now we have console.log( ... )
.
Consider have a look at the unobtrusive javascript below:
document.addEventListener("DOMContentLoaded", function(event) {
var alertButtons = document.getElementsByClassName("dismissable");
for (var i=0; i < alertButtons.length; i++) {
alertButtons[i].onclick = function() {
this.parentElement.style.display='none';
console.log('Close Button. Element ' + this.parentElement.id + ' dismissed');
return false;
};
};
});
And also how the trigger be done in HTML code,
by just defining the dismissable
class.
<div class="panel red display-container" id="red-danger">
<span class="dismissable button large display-topright">×</span>
<p><strong>Danger!</strong>:
Red often indicates a dangerous or negative situation.</p>
</div>
<div class="panel yellow display-container" id="yellow-warning">
<span class="dismissable button large display-topright">×</span>
<p><strong>Warning!</strong>:
Yellow light indicates that something could go wrong.</p>
</div>
<div class="panel green display-container" id="green-success">
<span class="dismissable button large display-topright">×</span>
<p><strong>Success!</strong>:
Green light indicates on schedule, on budget, all good.</p>
</div>
<div class="panel blue display-container" id="blue-info">
<span class="dismissable button large display-topright">×</span>
<p><strong>Info!</strong>:
Blue light indicates that you are in electronics mode.</p>
</div>
Now, consider click x
in each alert box.
We are going to see the result in console.
Other Feature
There are some other feature, but this is beyond the scope this tutorial for beginner.
For example, you can try this network
tab yourself.
This is useful to track if there are any asset that failed to be loaded.
I think that is all.
What’s Next?
Consider continue reading [ Tools - HTML - Pug ].