Chrome For Mac Developer Tools

The Chrome Developer Tools are a set of debugging tools built right into Google’s Chrome browser that show developers how the browser is interacting with their website or application. Anyone can use the DevTools to see how a website is built, where it content is being served from, how quickly the page is loading, and much more. These tools are extremely useful for those assessing the performance of their website or troubleshooting certain aspects of the page load. Video: Chrome Developer Tools Tutorial This video goes through how to use the network tab to examine request and response headers being sent by your web application to the browser. First, you’ll need to open the DevTools. To do this you can click the option menu (three vertical dots) in the upper right hand corner of Chrome, navigate to “More Tools” and “Developer Tools,” right-click any part of the page and click “Inspect,” or use a keyboard shortcut (Ctrl + Shift + I or Cmd + Opt + I for Mac) to bring the DevTools into view in the lower half of your web page. Next you’ll want to navigate to the tab you’re interested in.

Get started with Google Chrome's built-in web developer tools. + J (Mac) or Control + Shift + J (Windows, Linux, Chrome OS) to jump straight into the Console. Or press Command + Option + C (Mac) or Control + Shift + C (Windows, Linux, Chrome OS). And then select More Tools > Developer Tools.

Tabs include Elements, Console, Sources, Network, Performance and Security among others. For the purpose of this DevTools tutorial we are looking at the Network tab, which provides detailed information on how the origin server and browser interact to load the page into the browser. When you first open the network tab you will not see anything - you’ll need to refresh the page with DevTools still open so it can record data.

We also recommend checking the “disable cache” button which will disable the browser cache while DevTools is open. This is important if you are trying to examine responses from your web server or Content Delivery Network, as otherwise you will likely be served content from the browser cache. When you reload the tab you’ll see requests coming in to the browser in real time. Each of these is an HTTP request, and the first will be the HTML document. By clicking on each individual request you can access the headers, cookies, timing, and content of the response. Response and Request Headers The response and request headers will give you information on where the request is being served from and additional data such as if it was served from a cache or Content Delivery Network.

The response headers are what each HTTP request is returning to the browser from the web server or CDN. The header for each request will be unique even if they are being served from the same server. For example, section.io assigns each request a unique id under section-io-id and Varnish Cache will also give each request an identifier under x-varnish. The headers will also tell you if this request was a cache hit or cache miss. For Varnish Cache, a cache hit will be marked x-cache: Hit.

Response headers can also tell you the cached age of the requested item, when the item was last modified, and the content type such ash text/html or image/png. The request headers are the headers sent by the browser when it makes a to your remote address. These give information on the type of browser and operating system making the request, the connection type, the IP address of the computer making the request, and more. By looking at these headers you can identify if your web application is having issues on certain operating systems, perform redirects based on user location or device type, and set caching rules. Stay tuned for more Google developer tools tutorials in the near future, and if you have any furthur questions please feel free to.