Draw This - beginner

Draw a labeled diagram of the main sections of browser developer tools, including Elements, Console, Network, and Sources panels. Show how a user can open the developer tools and navigate between these sections.

10 minutes

Hint 1

Hint 2

Hint 3

Hint 4

Hint 5

Grading Criteria

Browser window outline present

Developer tools panel clearly shown inside browser window

Tabs labeled: Elements, Console, Network, Sources

Method to open developer tools indicated (F12, right-click)

Navigation between tabs shown with arrows or highlights

Labels or notes explaining each main tab's purpose

Solution

  +-----------------------------------------------------+
  |                    Browser Window                   |
  | +-----------------------------------------------+   |
  | |               Developer Tools Panel            |   |
  | | +---------+ +---------+ +---------+ +---------+ |   |
  | | | Elements| | Console | | Network | | Sources | |   |
  | | +---------+ +---------+ +---------+ +---------+ |   |
  | |                                                 |   |
  | |  [Elements tab selected]                        |   |
  | |  - Shows HTML structure and styles             |   |
  | |                                                 |   |
  | +-----------------------------------------------+   |
  |                                                     |
  |  To open developer tools:                           |
  |  - Press F12 or Ctrl+Shift+I                        |
  |  - Or right-click on page and select 'Inspect'     |
  +-----------------------------------------------------+

This diagram shows a browser window with the developer tools panel open at the bottom or side.

The developer tools have tabs labeled Elements, Console, Network, and Sources.

The Elements tab shows the HTML and CSS of the current page, letting you inspect and edit the page structure.

The Console tab shows messages, errors, and lets you run JavaScript commands.

The Network tab shows all files the browser loads, useful for checking loading times and errors.

The Sources tab lets you view and debug the JavaScript code.

You can open developer tools by pressing F12, Ctrl+Shift+I, or right-clicking on the page and choosing 'Inspect'.

Arrows or highlights in the diagram show how to switch between these tabs to explore different tools.

Variations - 2 Challenges

[intermediate] Draw a flowchart showing the steps to open browser developer tools and inspect an element on a webpage.

[advanced] Draw a detailed diagram of the Network panel in browser developer tools, showing how to view file loading times, status codes, and filter requests.