Inspecting HTML with Dev Tools

Question 1

What are Google Chrome Developer Tools?

Answer 1

Google Chrome Developer Tools are built into Chrome and allow you to debug and inspect HTML, CSS, and JavaScript code.

This allows you to develop your own pages and to see how other sites implement features that you find interesting.

Question 2

What’s a good starting resource page on Mozilla for Developer tools?

Answer 2

https://developer.mozilla.org/en-US/

Question 3

What’s a good resource for all the different kinds of HTML elements on the MDS?

Answer 3

https: //developer.mozilla.org/en-US/docs/Web/HTML/Element

tinyurl. com/htmlmozelementlist

Question 4

How to get to Dev Tools in: CHROME

Answer 4

Path: 3 dots, More Tools, Developer Tools

Shortcut: Right click on web page>Inspect

Shortcut: Ctrl+Shift+ “i”

Also can use Ctrl+U but gives less info that opens in a separate window

Question 5

How to get to Dev Tools in: EDGE

Answer 5

Path: 3 dots, Tools, F12 Developer tools

Shortcut: F12 or Fn+F12

Shortcut: Ctrl + U

Question 6

How to Get to Dev Tools in Firefox:

Answer 6

Path: 3 stacked lines, Web Developer, Inspector

Shortcut: Control+Shift+C

Also can use Ctrl+U but gives less info that opens in a separate window

Question 7

Mozilla’s Developer Tools Console - What to know

Answer 7

This developer console is totally different in layout than the other browsers.
Path: 3 stacked lines, Web Developer

Once there you will see many options, The one most likely used will be Inspector but it is expansive.in its options.

Question 8

Inspecting Individual Elements on a Webpage- The Easy Way

Answer 8

On the webpage, place your curse on the element you’d like to inspect, right click, choose INSPECT.

The DevTools console will open but it will be pinpointed precisely to the code for that particular element

Question 9

Can I add elements to a webpage from the DevTools window?

Answer 9

YES

Right click the Element on the DevTools window and choose “Edit Element” or”Add
Element”
The changes made should be immediately visible on the webpage in real time.

Question 10

Can I delete an element from a webpage via the DevTools window?

Answer 10

YES

Right click the element on the DevTools window and choose “Delete Element”
The changes made should be immediately visible on the webpage in real time.

Question 11

Can I edit a webpage’s code from the DevTools window?

Answer 11

YES

Right click the Element on the DevTools window and choose “Edit Element”