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

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

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

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

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

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

Chrome: Developer Tools IT311 | Afnan Al-Subaihin

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

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

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: https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm IT311 | Afnan Al-Subaihin

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

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! https://chrome.google.com/webstore/category/ext/11-web-development The ‘Web Development’ Category. IT311 | Afnan Al-Subaihin

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: http://www.fiddler2.com/fiddler2/version.asp 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 Download Fiddler from this page: http://www.fiddler2.com/fiddler2/version.asp -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

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

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

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: http://en.wikipedia.org/wiki/List_of_HTTP_header_fields IT311 | Afnan Al-Subaihin

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

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: http://en.wikipedia.org/wiki/List_of_HTTP_header_fields Body of the response (the actual required file) IT311 | Afnan Al-Subaihin

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

Useful Links Chrome Download: Chrome Extensions: Read More! Fiddler: 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/11-web-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