browser tools that make web development easier

30
alanseiden.com Alan Seiden Consulting Browser tools that make web development easier

Upload: alan-seiden

Post on 29-Aug-2014

2.055 views

Category:

Technology


1 download

DESCRIPTION

A departure from my usual PHP talks, I discussed browser-based tools that help with client-side tasks such as performance diagnostics, page analysis, HTTP flow analysis, the ability to step through javascript, and much more. Developers can work smarter with downloadable browser tools.

TRANSCRIPT

Page 1: Browser tools that make web development easier

alanseiden.comAlan Seiden Consulting

Browser tools that make web development easier

Page 2: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

My focus

Advancing PHP on IBM i

• PHP project leader, Zend/IBM Toolkit

• Contributor, Zend Framework DB2/i enhancements

• Developer, Best Web Solution, IBM/Common

• Authority, web performance on IBM i/iSeries

2

Page 3: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

Contact information

Alan Seiden

[email protected]

201-447-2437

alanseiden.comtwitter: @alanseiden

3

Page 4: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

Where to download these slides

From my sitehttp://alanseiden.com/presentations

On SlideSharehttp://slideshare.net/aseiden

The latest version will be available on both sites

4

Page 5: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

Client-side development tools

• Not my usual PHP server-side topic

• Today we discuss the client side That means what ends up in the user’s browser Dynamic HTML, styles and classes, javascript,

performance related to HTTP requests

• Free tools that run in our web browser can teach us what we’re doing right and wrong

5

Page 6: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

Format of today’s talk

• Mostly live demos of the tools

• These slides will not contain all the details of each tool—only basic reference info

• People reading these at home will miss the details

6

Page 7: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

Browser tools?

7

Page 8: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

“View source” started it all

• “View Source” was the original built-in browser tool

• CTRL+U is its shortcut on many browsers

• It still works but does not meet today’s challenges: Dynamic HTML (View Source doesn’t include it) Performance and speed testing Debugging of style sheets (CSS) and javascript Sophisticated redirects and AJAX

8

Page 9: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

Firefox add-ons

9

Page 10: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

Why Firefox?

• Favored by developers

• Highly extensible add-on system Anyone can create an add-on

• To see all Firefox add-ons for web developers: https://addons.mozilla.org/firefox/extensions/web-development/

10

Page 11: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

Web Developer Toolbar

• URL: http://chrispederick.com/work/web-developer/• Author: Chris Pederick• Browser: Firefox• Purpose

Analyzes web pages in dozens of ways Easy enough for non-programmers to use

Favorite features:• View generated source (such as generated by javascript)• View style information• Outline various types of objects, table cells, etc

11

Page 12: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

Web Developer Toolbar in detail

• Quick way to figure out what’s going on in a page• Example below: check CSS style/class of menu item

12

Page 13: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

Live HTTP Headers

• URL: http://livehttpheaders.mozdev.org/• Authors: Daniel Savard, Nikolas Coukouma• Browser: Firefox• Purpose

Shows the “flow” of HTTP request/response Great tool to teach how the web works See submitted form data Determine what pages load before redirects occur

13

Page 14: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

Live HTTP Headers in detail

• Example below: Capture what URL was launched before redirect occurred

14

Page 15: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

Colorzilla

• URL: https://addons.mozilla.org/firefox/addon/colorzilla/• Author: Alex Sirota• Browser: Firefox• Purpose

Find out what colors are used in web sites, including in images Helpful for building a color palette It’s so good, you may find yourself loading images in a browser

so you can use this tool

15

Page 16: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

Colorzilla in detail

• Example: Which “blue” was used in NEMUG’s logo?

16

Page 17: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

Firebug

• URL: https://addons.mozilla.org/firefox/addon/firebug/• Author: Joe Hewitt, johnjbarton, robcee,

FirebugWorkingGroup, Jan Odvarko• Browser: Firefox• Purpose

Advanced tool for programmers Debug javascript and CSS Measures performance A container for other tools

• Has more features than we could possibly cover here

17

Page 18: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

Firebug in detail

• See relationships between page objects, HTML, scripts, styles

18

Page 19: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

Firebug in detail

• I recently used it to understand layout issues with my blog

19

Page 20: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

Firebug in detail (Pagespeed)

• Includes Google’s PageSpeed diagnostic tool

20

Page 21: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

For other browsers

21

Page 22: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

Internet Explorer Developer Tools

Included with IE. Launch via menu or F12 key

22

Page 23: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

IE Developer Tools example

See all “Alt Text” for page

23

Page 24: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

Safari Developer Tools

http://developer.apple.com/technologies/safari/developer-tools.html

24

Page 25: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

Google Chrome Developer Tools

http://code.google.com/chrome/devtools/ Anyone here have experience with this?

25

Page 26: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

Resources

26

Page 27: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

Resources

Firefox List of add-ons: https://addons.mozilla.org/firefox/extensions/web-

development/ Web Developer Toolbar: http://chrispederick.com/work/web-developer/ Live HTTP Headers: http://livehttpheaders.mozdev.org/ Colorzilla: https://addons.mozilla.org/firefox/addon/colorzilla/ Firebug: https://addons.mozilla.org/firefox/addon/firebug/ FirePHP: http://firephp.org

• Safari Safari Developer Tools: http://developer.apple.com/technologies/safari/

developer-tools.html Internet Explorer

Developer menu is built in Google Chrome

Developer Tools: http://code.google.com/chrome/devtools/

27

Page 28: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

Now it’s your turn

28

Page 29: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

Share your favorite browser dev tools

• What tools do you use?

• How will you use what you learned today?

29

Page 30: Browser tools that make web development easier

Browser tools that make web development easierAlan Seiden Consulting

Contact

Alan Seiden Alan Seiden ConsultingHo-Ho-Kus, NJ

alanseiden.com

30

[email protected] ● 201-447-2437 ● twitter: @alanseiden