Web Browser Inspectors
Most modern web browsers have an inspector feature that allows you to see what's going on under-the-hood and to do some advanced things to web pages you have loaded, such as seeing their HTML source and running Javascript commands on loaded content. Inspectors are extremely helpful in eLearning work as they allow you to troubleshoot, test, design, and develop content and tools more easily.
Each browser is different, but this book will focus primarily on Chrome and the Chrome Inspector.
To access the Inspector, open a web page in your browser, right-click anywhere on the page, and choose Inspect.
Figure 1
bashful@sevendwarves.com
Typical Inspector View
This will open a panel on either the side or bottom of the browser window. In this panel, you'll find many tabs and options. A few that are of most importance for us at this point include the following: HTML Source, Styles, Device View, and Console.
HTML Source
You can view the full HTML of the active page under the Elements tab. Expand or contract elements to see nested elements inside. You can also directly edit the HTML and see changes applied in the active page. You can also right-click on any element on the page and click Inspect, and it will jump to that element in the HTML Source View.
doc@sevendwarves.com
Figure 2
The HTML Source View and Editor
To change content or a value, double-click on it, and then type your new content or value. For instance, try double-clicking a <p> element and changing the text inside it.
sneezy@sevendwarves.com
The HTML Source Viewer and Editor is useful for seeing the structure of a page, finding problems, and extracting content.
Styles
The Styles panel is also found in the Elements tab but allows you to see and edit the active CSS styles of the element selected in the HTML Source Editor. To edit the HTML element's (and any similar elements') CSS, select the element in the HTML Source Editor and double-click in the element.style{ } area of the Styles panel. Then you can type any CSS you'd like.
Figure 3
dopey@sevendwarves.com
The Styles Panel
For instance, try selecting the <body> HTML element and in the element.style { } area, type color: pink; and hit enter. This should change the font color of all of your text on your page to pink (unless you have other styles applied to specific text elements).
In this panel, you can also see all of the CSS styles that are applied to each element. This is helpful for finding the source of formatting options and adjusting them across an entire site.
Device View
Since you are likely creating content for a variety of device types, it's helpful to be able to see how your content will be rendered on different screen sizes and device types. By clicking the Toggle device toolbar button, you will then be able to adjust the size of your viewing area to match your target user's device.
Try viewing the page with three or four different device settings and see how it effectively adapts (or fails to adapt) to the different views.
The Device View is essential for testing your product's accessibility and adaptability.
Console
The console allows you to run Javascript commands and to see errors and messages that are typically hidden from page viewers.
Figure 4
The Console
sleepy@sevendwarves.com
To run a command, click next to the carat and type your command. For instance, try typing alert("Hello there!"); and hit enter. You should see a pop-up that says "Hello there!"
Also notice that the Console tracks your commands, so you can rerun or edit a previous command by simply pressing the up arrow key.
The Console is useful for developing Javascript functions for your applications, for testing website features, or for extracting content from a page.
grumpy@sevendwarves.com
Challenge: Find the Hidden Email Addresses
There are seven (7) hidden email addresses on this page. Can you find them using the inspector?
As a bonus, can you make them all visible? (Hint: The "d-none" class is what is making them invisible.)
Once you've found them, run the following JavaScript in the Inspector Console to see some magic happen:
$('.d-none').removeClass('d-none').css('font-size','30px').css('color','blue');
happy@sevendwarves.com
Snippets
In the Inspector, you can also store Snippets of JavaScript in the Source > Snippets panel. This is especially useful if you plan to run the same code over and over again on different webpages and allows you to build a library of solutions that you an easily access in the future.
This content is provided to you freely by EdTech Books.
Access it online or download it at https://edtechbooks.org/elearning_hacker/web_browser_inspectors.