Browser tools that make web development easier slides/Browser...Alan Seiden Consulting Browser tools...

alanseiden.comAlan Seiden Consulting

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

Contact information

Alan Seiden

alan@alanseiden.com

201-447-2437

alanseiden.comtwitter: @alanseiden

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

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

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

Browser tools?

“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

Firefox add-ons

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/

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

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

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

Live HTTP Headers in detail

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

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

Colorzilla in detail

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

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

Firebug in detail

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

Firebug in detail

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

Firebug in detail (Pagespeed)

• Includes Google’s PageSpeed diagnostic tool

For other browsers

Internet Explorer Developer Tools

Included with IE. Launch via menu or F12 key

IE Developer Tools example

See all “Alt Text” for page

Safari Developer Tools

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

Google Chrome Developer Tools

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

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/

Now it’s your turn

Share your favorite browser dev tools

• What tools do you use?

• How will you use what you learned today?

Contact

Alan Seiden Alan Seiden ConsultingHo-Ho-Kus, NJ

alanseiden.com

alan@alanseiden.com ● 201-447-2437 ● twitter: @alanseiden

Browser tools that make web development easier slides/Browser...Alan Seiden Consulting Browser tools...

Documents

Transcript of Browser tools that make web development easier slides/Browser...Alan Seiden Consulting Browser tools...

Creating dynamic Web sites with PHP and MySQLpage through your browser. You will only see the text Hello World. This happened because PHP processed the code, and the code told PHP

Introduction To Web Application Security in PHP. Security is Big And Often Difficult PHP doesn’t make it any easier.

PHP Without PHP—Automattic

Web Programming Introduction to PHP COM427 1. Objectives To understand what PHP is and how a PHP script works with a Web Browser and a Web Server To learn.

PHP Security. Two Golden Rules 1.FILTER external input Obvious.. $_POST, $_COOKIE, etc. Less obvious.. $_SERVER 2.ESCAPE output Client browser MYSQL database.

Scaling php - Intercon php

Pemrograman Web –PHP 2lecturer.ukdw.ac.id/anton/download/web6.pdf · Web Database Architecture with PHP and MySQL Browser Web Server PHP Engine MySQL Server 1 2 3 6 5 4 1. Browser

CCS 4370/6370: Web Programming Spring 2013 PHP Basics: Introduction to PHP a PHP file, PHP workings, running PHP. Basic PHP syntax variables, operators,

Stupid Browser Tricks - Sean Coatesfiles.seancoates.com/sean-coates_stupid-browser-tricks.pdf · Stupid Browser Tricks Sean Coates Web Architect – OmniTI ... • PHP Community (php.net),

MySQL Database System MIS309 Database Systems. 2 2-Tier Architecture Web Browser (Client) Web Server PHP.

Lecture 2 Unix and PHP · 2013-01-22 · Server-Side Scripting Internet (1) GET foo.php / HTTP 1.1 foo.php bar.html Web Server Client Browser A p a c h e PHP Server Storage (2) Apache

RANCANG BANGUN APLIKASI SIMPAN PINJAM PADA KOPERASI … · seperti Mozilla Firefox sebagai web browser,bahasa pemrograman VB dan PHP, Macromedia Dreamweaver, Accsess. 2. Penelitian

Application Development with Oracle Database · Application Continuity Migration Framework HTML5 – Desktop & Browser Javascript Opensource Cloud Java .NET PHP XML APEX Multitenant

WordPress - Gartenbauvereine ins Web...o MAMP (Macintosh) Operating System: Cross-platform Browser Support: IE (Internet Explorer 8+), Firefox, Google chrome, Safari, Opera PHP Compatibility:

PHP Tutorial - Learn PHP

PHP. $_GET / $_POST / $_SESSION PHP uses predefined variables to provide access to important information about the server and requests from a browser.

PHP PHP: Hypertext Preprocessing

Lecture 21 Introduction to PHP (Part-1) · 2.3 Writing and executing PHP code… •Start WAMP server •Go to localhost either by typing localhost in address bar of the browser or

PHP and MySQL php-mysql PHP and MySQL

Php Training Institute|Php Tutorial|Php Opening in Bangalore|Php Jobs|Php Training Centre|Php Course|Campus Drive for fresher| Php Online Video |Video Tutorials| On Job Project| Online