2. Then refresh the page. You'll see 8 AJAX calls, click on the people.json request (the url).
3. That will redirect you to its details on the Network Panel (more on that later). Click on people.json and then on the Preview tab. That will show you the entire response which you can expand to see its details.
4. Right click on (7 array of people) and select "Store as global variable". These 4 previous steps can be used to inspect AJAX results in detail.
Right now, the AJAX response should be stored on a variable named temp1. Try this on the console
temp1.filter(person => person.isActive)
That should filter the 7 people and only show those who are active. Now try this:
temp1.map(person => person.age)
That should've printed only the ages of the 7 people as a table.
Finally, try this to copy the entire content of a the variable to the clipboard:
How would you print in a table only the ages of people that are active (hint: you can do things like filter().map())?
The page is made out of two components. The top one made by "Miguel" which shows the first names, last names and full names of the users. And a bottom one which shows the ages made by "José".
Visually, it looks like there is something wrong with the bottom component. Instead of the birth year we are getting undefined multiple times.
Let's look in the console and see what's happening.
1. The first component prints the first and last names. Then it adds the full names to each person and tries to display those.
3. The bottom component never gets to the point of calculating the birth year which was the final step of the page's execution.
Who should you assign the BUG to?
Console: Querying the DOM ($ and $$)
The main two things you can do with the DOM are:
1. Query/select elements (e.g. all links aka anchor tags, or all paragraphs aka p tags).
2. Once with some elements selected you can modify them. All changes to a DOM element are immediately reflected on the actual page.
What is the Elements panel of devtools? It's just a visual representation of the DOM.
Open this page. Try the following command on the console.
That DOM API method selects the first tag in the page with the class "app" and prints it in the console (in this case app contains basically the whole page, which is a navigation and some content). Now try:
The previous code will select all paragraphs of the app (p tags inside the div with class app). Hover through the results and you'll see the element highlighted in the page, and if you click it, you'll get redirected to it in the Elements panel.
The devtools provides some useful aliases for document.querySelector and document.querySelectorAll. They are $ and $$. $$('p') should get you the same result as the previous command.
How many links with the class "link" are in the page?
How many links (of any kind) are in the page?
$('h1').style.color = 'magenta'
The first gets you the character count of the heading.
The second gets you the exact position of the heading in relation to the viewport.
When doing accessibility test on a page, a common problem is to get into a focus trap. You start to navigate the page with tabs and at some point the focus is lost or on something invisible.
Inspect this very page hit tab once and run on the console:
Then right click the result on the console and select "Reveal in Elements panel" to see exactly which HTML element has the focus.
Open this page, start tabbing and set the focus on the cta that says "I'm a button". Then hit tab again.
Where is the focus? Use document.activeElement to find out.
What's the id of the invisible element that traps the focus?
Sometimes, you know there is a defect related to an specific element (e.g. a button), but don't know what's exactly causing it.
Using Monitor Events you can get log specific events or all events that happen to an element.
Type the following:
That will log in the console every single event/interaction on the whole page.
To monitor the events of an element just type monitorEvents() with the element in the between the parenthesis:
An easy way to do that is to inspect an element you want to monitor, that will save a reference to it in $0 and then type monitorEvents($0).
Open this page. Click the first button, it should be toggle the visibility of an element.
Click the second in the magenta part. Tt should do the same. Now do it in the white part with the text. It shouldn't work. Monitor that second button click events on the magent part and then in the white part. You can do that by adding 'click' as the second param of monitorEvents:
On the object logged in the console, look for the target value in both cases.
What tag is logged as the target in the white part?
What tag is logged as the target in the magenta part?