open a new browser tab, open up developer tools, open up the network tab and then finally load the URL to monitor)
Be sure to open the tab before loading a page so that it captures the network requests (e.g.
$0 returns the currently selected element in the Elements panel. The following is a screenshot of the Network panel when loading the Linkedin mobile site on a fresh page load: That being said, the Network panel offers a surprising amount of detailed information considering how it's only a few clicks away, it's certainly an excellent candidate for debugging network issues. Identifying and fixing requests that take a long time to complete is an important step in optimizing a site.Īn HTTP proxy, such as Charles Proxy, can give you a decent amount of information regarding your website's network. However, performance becomes an important issue, as your site's traffic increases. Viewing network traffic isn't the most glamorous activity - especially if you're new to web development. The Network panel gives us a view into the resources that are requested and downloaded over the network in real-time. Moving on, now, we'll take a look at the next two panels: Network and Console. This will open the developer console in a new window.In Part 1 - Chrome Dev Tools: Markup and Style, we reviewed two panels: Elements and Resources.
NETWORK INSPECTOR CHROME OS APP MAC
To open the console on the Mac desktop app, click "Help" in the Mac menu bar, then select "Developer Tools". The JavaScript Console will show up on the bottom half of the active browser window.Īlternatively, you can use the keyboard shortcut Option Ctrl C, though note that you will need to enable the Develop menu in your Safari Preferences for this shortcut to work. Once the Develop menu has been enabled, you can go to the Develop menu in the menu bar and then select the "Show JavaScript Console" option. Once in the Preferences dialog, navigate to the Advanced tab, then check the "Show Develop menu in the menu bar" box. To do this, open the Safari menu in the Mac menu bar, then select Preferences. To open the console on Safari, you will first need to turn on the Develop menu. The toolbox will appear at the bottom of the browser window, with the Web Console activated.Īlternatively, under the header Tools in the Mac menu bar, navigate to the sub-menu Web Developer and select Web Console. To open the console on Firefox, use the keyboard shortcut Ctrl Shift K (on Windows) or Ctrl Option K (on Mac). Once in the F12 Developer Tools, navigate to the Console tab. To open the console on Edge, hit F12to access the F12 Developer Tools. To open the developer console window on Chrome, use the keyboard shortcut Ctrl Shift J (on Windows) or Cmd Option J (on Mac).Īlternatively, you can use the Chrome menu in the browser window, select the option "More Tools," and then select "Developer Tools."
NETWORK INSPECTOR CHROME OS APP HOW TO
The following are instructions for how to open the developer console on various different browsers and Airtable's Mac desktop app. In the course of troubleshooting your issue, the Airtable support team may ask you to take a screenshot of the developer console. The information displayed in the developer console can be extremely helpful for the Airtable support team when we're trying to figure out how to solve an issue. (It does other things, too, but this is all that really matters for this article.) The developer console is a tool which logs the information associated with a web page, such as JavaScript, network requests, and security errors.