Browser Development Tools by Rusty Keele Altair 8800 (1975) - - PowerPoint PPT Presentation

browser
SMART_READER_LITE
LIVE PREVIEW

Browser Development Tools by Rusty Keele Altair 8800 (1975) - - PowerPoint PPT Presentation

Browser Development Tools by Rusty Keele Altair 8800 (1975) https://www.flickr.com/photos/mratzloff/9169309781/ Who This Presentation Is For Anyone who wants to learn about browser developer tools Basic knowledge of HTML, CSS and


slide-1
SLIDE 1

Browser Development Tools

by Rusty Keele

Altair 8800 (1975)

https://www.flickr.com/photos/mratzloff/9169309781/

slide-2
SLIDE 2

Who This Presentation Is For

  • Anyone who wants to learn

about browser developer tools

  • Basic knowledge of HTML, CSS and

JavaScript is helpful

  • Anyone interested in web

programming

  • People who are comfortable in

their seats and don't want to leave

Sinclair ZX Spectrum (1982)

https://www.flickr.com/photos/alessandrogrussu/6959767634/

slide-3
SLIDE 3

What We’ll Cover In This Presentation

  • An overview of browser

development tools

  • Common and unique features
  • Where to learn more
  • “Celebrating Geek Culture”

with photos of vintage micro- computers!

Kaypro 1 (1986) with WordStar Template

https://www.flickr.com/photos/andyi/5032041439/

slide-4
SLIDE 4

About Me

  • Started programming BASIC on a

Commodore 64 in 1982!

  • B.A. in Computer Science from

Weber State University

  • Full time web programmer for

UEN – mostly PHP

https://www.flickr.com/photos/shaniber/3027057973

Commodore 64 (1982)

slide-5
SLIDE 5

An Introduction To The Tools

Apple IIe (1983)

https://www.flickr.com/photos/debagel/5902534055/

slide-6
SLIDE 6

What Are Browser Development Tools?

  • A suite of tools for web programmers
  • Display in a browser window
  • Built in to most modern web browsers
  • We’ll discuss Firefox, Chrome, Internet Explorer and Safari
  • We’ll talk about desktop browsers only – mobile browser tools are different
  • Can also be browser plug-ins
slide-7
SLIDE 7

What Do They Look Like?

Firefox Chrome

slide-8
SLIDE 8

Who Are They For?

  • Web developers and programmers
  • But some tools are helpful for non-programmers:
  • Network: see how long it takes items to load
  • Console: see error messages
  • Responsive design mode: see how your site looks on different devices
  • If you want to see what a specific site is doing!
slide-9
SLIDE 9

How To Open The Tools

Keyboard Shortcut Menu Bar Context Menu Firefox Ctrl + Shift + i F10 > Tools > Web Developer > Toggle tools Right-click > Inspect element Chrome Ctrl + Shift + i Customize icon > More tools > Developer tools Right-click > Inspect element Internet Explorer F12 Tools > F12 Developer tools Right-click > Inspect element * Safari Command-Option-I Develop menu Control-click > Inspect Element

* Safari tools musts be enabled first: click "Show Develop menu in menu bar" setting in Safari's preferences under the Advanced pane.

slide-10
SLIDE 10

Try It Yourself!

  • Open one of these browsers on your computer
  • Mozilla’s test page: http://go.uen.org/3Ss
  • Open the developer tools and follow along!
slide-11
SLIDE 11

Common Utilities In All Browsers

Compaq Portable (1982)

https://www.flickr.com/photos/michaelrogers/3900975898/

slide-12
SLIDE 12

The Explorer / Inspector

  • View HTML
  • Inspect the Document Object

Model (DOM)

  • See Cascading Style Sheets (CSS)
  • Edit CSS in real-time

Internet Explorer 11: DOM Explorer

slide-13
SLIDE 13

The Console

  • View JavaScript
  • See errors, warnings and

messages

  • Edit JavaScript in real-time

Firefox: Console

slide-14
SLIDE 14

The Network Monitor

  • See all the network requests your

browser is making

  • Images
  • Scripts
  • Styles
  • Ads
  • View details for:
  • Raw headers and responses
  • Cookies
  • Load times
  • Security

Chrome: Network Tab

slide-15
SLIDE 15

The Debugger

  • Allows you to debug JavaScript

code

  • You can step through the code to

examine or modify it

  • Set breakpoints
  • See variable values

Internet Explorer 11: Debugger

slide-16
SLIDE 16

The Profiler / Performance Tool

  • View your site’s responsiveness
  • Create profiles
  • A record of what the site is doing
  • Save and export profiles

Firefox: Performance Tab

slide-17
SLIDE 17

Unique Features For Specific Browsers

Radio Shack TRS-80 (1977)

https://www.flickr.com/photos/eevblog/14577631278/

slide-18
SLIDE 18

Internet Explorer 11

  • Emulation tab
  • Mode: can emulate IE 5, 7, 8, 9, 10 and

Edge (11)

  • Display: landscape and portrait views

for different screen sizes / devices

  • Geolocation
  • Profile memory usage and UI

responsiveness

  • The Help icon (?) or F1
  • https://msdn.microsoft.com/en-

us/library/bg182326%28v=vs.85%29.as px

slide-19
SLIDE 19

Firefox 38

  • Responsive Design Mode: test

different screen sizes

  • Dock options: where to show your

browser tools

  • Toolbox Options: change the

appearance of your browser tools

  • Style Editor tab: edit and save

external CSS files

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

US/docs/Tools

slide-20
SLIDE 20

Google Chrome 43

  • Audits: suggestions to improve

your code

  • Device mode:
  • show screen sizes for specific devices
  • throttle network speeds
  • Resources: view fonts, images

and storage

  • https://developer.chrome.com/

devtools

slide-21
SLIDE 21

Safari 8

  • Activity View Bar: See at-a-glance

summary of key information

  • Layers, Styles, Nodes: See

detailed information about each element

  • https://developer.apple.com/lib

rary/safari/documentation/App leApplications/Conceptual/Safar i_Developer_Guide/Introduction /Introduction.html

slide-22
SLIDE 22

Wrapping Up

Atari 800 (1979)

https://www.flickr.com/photos/mratzloff/9171555638/

slide-23
SLIDE 23

Where To Learn More

  • Browser specific documentation (see previous links)
  • A good web site: http://devtoolsecrets.com/
  • Mozilla Developer Network: https://developer.mozilla.org/en-

US/docs/Tools

  • Info about several topics - and many have videos!
  • Some books on Amazon.com - mostly browser specific
slide-24
SLIDE 24

The End

  • You can get these slides at

http://c64sets.com/slides/

  • rkeele@uen.org
  • Rate this talk (thumbs up or thumbs down
  • n the Tech Summit schedule page)
  • Images from Flickr.com (all have

creative commons license)

  • Vintage computer info from

http://oldcomputers.net/

IBM PC (1981)

https://www.flickr.com/photos/76300039@N02/12840558153/