Transcript Web Developer Toolbox

IT311 | Afnan Al-Subaihin
• Introduction
• Web development using Chrome
– Built-in tools
• Page Source Viewer.
• Developer Tools
• JavaScript console.
– Extensions
• Web Developer Toolbar
• Other: Resolution Test, Session Manager and Edit this cookie
– External Tools:
• Fiddler
IT311 | Afnan Al-Subaihin
• Successful web development requires certain essential
tools.
• In order to create a website, you need some tools to
help you:
–
–
–
–
Write the code,
Test it,
Debug it,
And finally, enhance it.
• You should not be shocked to know that most of this
can be done within a browser:
IT311 | Afnan Al-Subaihin
• Chrome comes with several standard tools that are built into the
browser.
• By themselves, these tools are powerful enough to consider
Chrome an essential web development tool.
• These tools include:
– Page Source Viewer: An expanded page source viewer.
– Developer Tools: The ability to display detailed information about a
web page.
– JavaScript Console: A JavaScript error detection tool.
• Moreover, these capabilities can be greatly extended using the rich
Chrome Extensions library:
– Firebug
– Web Developer Toolbar
– Resolution Test, etc.
IT311 | Afnan Al-Subaihin
• Chrome enables you to
view the source of any
currently-open page.
• It uses its own source
viewer with syntax
highlighting and color
coding of the html tags.
-> Tools -> View Source
Or: Ctrl + U
IT311 | Afnan Al-Subaihin
• A tool that provides information regarding the
current web page, such as:
– Web page source as a tree: the developer can search
the source code and highlight elements in the web
page.
– Website resources
– Network communication (HTTP Requests and
Responses)
– And many other tabs, including JavaScript Console
-> Tools -> Developer Tools
Or: Ctrl + Shift + I
IT311 | Afnan Al-Subaihin
IT311 | Afnan Al-Subaihin
• A tool within developer tools that is especially
important, it helps:
– Detect errors, warnings and messages caused by
the currently-opened tab.
-> Tools-> Error Console
IT311 | Afnan Al-Subaihin
Live Demo
IT311 | Afnan Al-Subaihin
• This extension, by itself, makes Chrome an
indispensable tool for Web development and
testing.
• Adds a toolbar to the browser containing various
web developer tools:
–
–
–
–
–
It outlines page elements,
displays the size of images,
gives CSS and form information,
disables certain elements on a page,
and much more.
• Download Link
IT311 | Afnan Al-Subaihin
Live Demo
IT311 | Afnan Al-Subaihin
• Chrome provides a wide range of assorted
extensions that will meet your web development
needs.
• Resolution Test (download)
• Edit This Cookie (download)
• Session Manager (download)
• And MORE!
– https://chrome.google.com/webstore/category/ext/1
1-web-development
– The ‘Web Development’ Category.
IT311 | Afnan Al-Subaihin
• Fiddler is a Web Debugging Proxy.
• It logs all HTTP(S) traffic between your
computer and the Internet.
• It allows you to:
– Intercept all HTTP(S) traffic.
– Inspect HTTP’s requests and responses and their
headers.
– Set breakpoints.
– Alter incoming or outgoing data.
IT311 | Afnan Al-Subaihin
Sessions List: Shows
all the currently
running HTTP sessions
Session Inspector: double click on a
session from the session list to inspect
it. It’ll show the HTTP traffic. Top pane
shows the request and bottom pane
shows the response.
Request
Tabbed Views:
shows different
formats of the
request/response
Response
IT311 | Afnan Al-Subaihin
Statistics tab:
Shows some
statistics
regarding the
currently selected
HTTP sessions
form the left
sessions list.
Pie Chart view:
shows the traffic
types in a pie chart
format.
IT311 | Afnan Al-Subaihin
• When you want to browse a page:
– You provide it with the URL.
– Your browser makes a request to the web server
that hosts the page according to the URL.
• Fiddler can show you each outgoing request
and its header.
IT311 | Afnan Al-Subaihin
HTTP command. GET
means Download
Requested file name
(URL)
The host that contains
the requested file.
Type of browser
Expected MIME types,
page language,
encoding and charset
The type of
connection preferred
by the user agent.
Keep alive keeps the
connection for the
specified timeout.
an HTTP cookie
previously sent by the
server with SetCookie
For more info:
http://en.wikipedia.org/wiki/List_of_HTTP_header_fields
IT311 | Afnan Al-Subaihin
• When a server receives a request for a
resource (page, image, etc.):
– It sends a response according to the request.
• Fiddler can show you each incoming response
and its header.
IT311 | Afnan Al-Subaihin
Response error code.
Used when redirection
occurs
The MIME type of the
response’s content.
The date and time the
message was sent.
The date and time at
which the response
expires.
Whether this object
may be cached or not.
Length of the
response body
Number of seconds
the object has been in
a cache.
Body of the response
(the actual required
file)
For more info:
http://en.wikipedia.org/wiki/List_of_HTTP_header_fields
IT311 | Afnan Al-Subaihin
Live Demo and Interface Walkthrough
IT311 | Afnan Al-Subaihin
• Chrome Download:
– https://www.google.com/intl/en/chrome/browser/
• Chrome Extensions:
– Main page: https://chrome.google.com/webstore/category/extensions
– Web Developer Category: https://chrome.google.com/webstore/category/ext/11web-development
• Read More!
– Mashable: 10 Must-Have Chrome Extensions for Developers
– Google Developers: Debug the Web
• Fiddler:
– Main page: http://www.fiddler2.com/fiddler2/
– Download: http://www.fiddler2.com/Fiddler2/version.asp
– Video Tutorials: http://www.fiddler2.com/Fiddler/help/video/
IT311 | Afnan Al-Subaihin