Browser Developer Tools Module #49

Question 1

How would you quickly run a custom bit of JavaScript?

Answer 1

By placing the cursor at the bottom of the console and either typing it out or pasting it in.

Question 2

If by chance you wanted to put the console into jQuery mode, how would one achieve this?

Answer 2

$($0) This technique lets you reference elements with the jQuery selector

Question 3

What messages can be triggered by the console api?

Answer 3

console. log( )
console. warning( )
console. error( )

Question 4

What is the emulator used for?

Answer 4

To visualize your design and test functionality for mobile devices. You can also throttle bandwidth to simulate weak signals / low bandwidth situations

Question 5

What can be learned from the Network Panel?

Answer 5

The Network Panel of the DevTools allows you to see all the connections that the browser must process while rendering a page.

At a quick glance the page shows:

a toolbar where you can setup some options and filters

a loading graph of the page as a whole

every single request, with HTTP method, response code, size and other details

a footer with the summary of the total requests, the total size of the page and some timing indications.

A very useful option in the toolbar is preserve log. By enabling it, you can move to another page, and the logs will not be cleared.

/*--------------------------Very Cool!----------------------------------*/
Another very useful tool to track loading time is disable cache. This can be enabled globally in the DevTools settings as well, to always disable cache when DevTools is open.

Question 6

What information can be obtained by looking at the Application Tab?

Answer 6

The Application tab gives you lots of information about which information is stored inside the browser relative to your website.

Question 7

What information can be obtained by looking at the Storage Panel?

Answer 7

You gain access to detailed reports and tools to interact with the application storage:

    Local Storage
    Session Storage
    IndexedDb
    Web SQL
    Cookies

Additionally:

This tab also gives you tools to inspect and debug Progressive Web Apps.

Click manifest to get information about the web app manifest, used to allow mobile users to add the app to their home, and simulate the “add to homescreen” events.

Service workers let you inspect your application service workers. If you don’t know what service workers are, in short they are a fundamental technology that powers modern web apps, to provide features like notification, capability to run offline and synchronize across devices.

Question 8

The Security Tab provides developers with?

Answer 8

Information that the browser has relatively to the security of the connection to the website.

Question 9

What can be done from within the Sources Panel?

Answer 9

In the Sources panel of the Developer Tools you can edit any script, also while the script is halted in its execution.

Edit the file and press cmd-S on Mac or ctrl-S on Windows/Linux, and the changes will be applied to the current window.

Of course the changes are not persisted to disk unless you are working locally and set up workspaces in the devtools, a more advanced topic.

Question 10

What can be learned from inside the Lighthouse Tab?

Answer 10

Speed of page loads, paints etc. It’s a very valuable feature.

The Lighthouse tab will help you find and solve some issues relative to performance and in general the quality of the experience that users have when accessing your website.

You can perform various kinds of audits depending on the kind of website:

he audit is provided by Lighthouse, an open source automated website quality check tool. It takes a while to run, then it provides you a very nice report with key actions to check.

Question 11

What are the 3 logging levels that you can use to differentiate console messages?

Answer 11

1. console.info
2. console.warn
3. console.error

Question 12

If you wanted to keep track of console messages while navigating from page to page, how could this be done?

Answer 12

Tick the “preserve logs” check box inside of the console settings.

Question 13

What’s the best way to get control over a console that’s populated with a lot of dense information?

Answer 13

To limit this problem the Console API offers a handy feature: Grouping the Console messages.

Let’s do an example first.

console. group(“Testing the location”)
console. log(“Location hash”, location.hash)
console. log(“Location hostname”, location.hostname)
console. log(“Location protocol”, location.protocol)
console. groupEnd()

Question 14

What if you wanted to collapse a group of messages to further clean up your view of the console?

Answer 14

Instead of using console.group use console.groupCollapsed. This will hide the content of those messages in the group until you want to look at them.

Question 15

What if you wanted to print the stack trace to the console?

Answer 15

By using console.trace( )

This will show the order in which you arrived at that point in the code.

Question 16

How could a developer find out how long it takes to execute a particular function.

Answer 16

Call the console.time( ) function.

Question 17

How would you create a CPU profile to determine the performance of a given function?

Answer 17

Nest a call inside of the function you want to measure with the console.profile function. Here’s an example snippet:

const doSomething = () => console.log("test")
const measureDoingSomething = () => {
  console.profile("doSomething()")
  //do something, and measure its performance
  doSomething()
  console.profileEnd()
}
measureDoingSomething()