1. Essential tools for implementing and testing websites
Web Developer Tools
Essential tools for implementing and testing websites
IT311 | Afnan Al-Subaihin

2. Outline 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

3. Why do we need web development tools?
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:
Chrome
IT311 | Afnan Al-Subaihin

4. Web Development Using Chrome
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

5. Chrome: Viewing the Source of a Page
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

6. Chrome: Developer Tools
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

7. Chrome: Developer Tools
IT311 | Afnan Al-Subaihin

8. Chrome: JavaScript Console
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

9. Chrome: JavaScript Console
Live Demo
IT311 | Afnan Al-Subaihin

10. Chrome: Web Developer Toolbar
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
Web Developer toolbar direct download link:
IT311 | Afnan Al-Subaihin

11. Chrome: Web Developer Toolbar
Live Demo
IT311 | Afnan Al-Subaihin

12. Even more Chrome Extensions!
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!
The ‘Web Development’ Category.
IT311 | Afnan Al-Subaihin

13. One Additional Tool: Fiddler
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.
Download Fiddler from this page:
IT311 | Afnan Al-Subaihin

14. 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
Download Fiddler from this page:
-While it’s running, Fiddler captures all HTTP sessions that are running through the system.
-An HTTP session’s requests and responses can be viewed in many different formats as shown by the options on top of each pane (on the right).
Response
IT311 | Afnan Al-Subaihin

15. Pie Chart view: shows the traffic types in a pie chart format.
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

16. Inspecting HTTP Requests using Fiddler
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

17. Inspecting HTTP Request using Fiddler
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 Set-Cookie 
For more info:
IT311 | Afnan Al-Subaihin

18. Inspecting HTTP Responses using Fiddler
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

19. Inspecting HTTP Response using Fiddler
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.
For more info:
Body of the response (the actual required file)
IT311 | Afnan Al-Subaihin

20. Live Demo and Interface Walkthrough
Fiddler
Live Demo and Interface Walkthrough
IT311 | Afnan Al-Subaihin

21. Useful Links Chrome Download: Chrome Extensions: Read More! Fiddler:
Chrome Extensions:
Main page:
Web Developer Category:
Read More!
Mashable: 10 Must-Have Chrome Extensions for Developers
Google Developers: Debug the Web
Fiddler:
Main page:
Download:
Video Tutorials:
IT311 | Afnan Al-Subaihin