WEEK-1

Question 1

Select an element in the page to inspect it; this will cause the Developer Tools to switch to the “Elements” panel and highlight the rendered sources code (HTML).

Answer 1

Element Inspector:

Question 2

Toggles the device toolbar on and off. This allows the developer to select a device and manually enter the pixel dimensions of the screen and scale the page. Useful for ensuring the page looks correct in a variety of devices.

Answer 2

Device Toolbar Toggle:

Question 3

Shows a view of the current page’s Document Object Model (DOM) tree as HTML. Selecting a given node (element) will highlight it in the page and show it’s applied CSS in the “Styles” panel. Developers can also modify this element and corresponding CSS styles panel.

Answer 3

Elements Panel:

Question 4

Show a JavaScript console pane. JavaScript calls to “Console.log()” will show the resultant text in this window. Additionally, all JavaScript errors will show up in this location in RED

Answer 4

Console Panel

Question 5

Shows a list of all items including in the page all images CSS, JavaScript and their corresponding location or origin.

Answer 5

Sources Panel

Question 6

Is used to get additional insights into requested and downloaded resources. Developers can start/stop the recording of a log that tracks all resources loaded including their corresponding status code, type, time (latency) size of the resources and initiator of the requesti

Answer 6

Network Panel:

Question 7

Enables a tool that allows developers to record and analyze all the activity in their applications as they run. It’s the best place to start investigating perceived performance issues. This is done by recoding a timeline of every event that occurs after a page loads and analyzing the corresponding FPS, CPU, and network request.

Answer 7

Performance Panel:

Question 8

Proved more detailed debugging information than the timeline by enabling developers to record detailed CPU/Memory profiles such as JavaScript CPU Profile.

Answer 8

Memory Panel

Question 9

Allows developers to inspect and manage client-side storage, caches, and resources.

Answer 9

Application Panel:

Question 10

Gives an overview of a page from a security standpoint including: Certificate verification (including whether the site has proven its identity with a TLS certificate), Transport Layer Security (TLS) connection (Note: TLS is often referred to by the name of it predecessor, SSL) and Sub resources security (indicating whether the site loads insecure HTTP sub-resources - ie: mixed content”)

Answer 10

Security Panel:

Question 11

Is used to analyze a page as it loads. Once a page has finished loading, the audit provides suggestions and optimizations for decreasing page load time and increase perceived (and real) responding.

Answer 11

lighthouse panel

Question 12

Displays the number of errors present in the “Console Pane”. To review the errors, simply switch over to the Console Pane and locate the items highlighted in red.

Answer 12

Error Icon:

Question 13

Controls where the Developer Toolbar should be places relative to the browser, as well as collection of all related settings and preferences for the tool set

Answer 13

Customize Icon:

Question 14

Closes the Developer Toolbar

Answer 14

Close Icon: