Inspecting HTML with Dev Tools Flashcards Preview

TL2 - Intro to HTML > Inspecting HTML with Dev Tools > Flashcards

Flashcards in Inspecting HTML with Dev Tools Deck (11):
1

What are Google Chrome Developer Tools?

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.

2

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

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

3

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

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

tinyurl.com/htmlmozelementlist

4

How to get to Dev Tools in: CHROME

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

5

How to get to Dev Tools in: EDGE

Path: 3 dots, Tools, F12 Developer tools

Shortcut: F12 or Fn+F12

Shortcut: Ctrl + U

6

How to Get to Dev Tools in Firefox:

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

7

Mozilla's Developer Tools Console - What to know

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.

8

Inspecting Individual Elements on a Webpage- The Easy Way

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

9

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

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.

10

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

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.

11

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

YES

Right click the Element on the DevTools window and choose "Edit Element"