Skip to main content
Cisco Meraki Documentation

Using Chrome Devtools with Wireshark


Overview

The purpose of this article is to provide instruction on how to take data from Chrome devtools and use it to troubleshoot resources loading within Wireshark. It is meant as a basic educational starting point. Chrome devtools is going to be the tool of choice for this article even though there are other tools such as Firebug for Firefox.

 

With web pages getting more and more complex sometimes it is hard to determine what exactly isn’t loading on a webpage. Devtools shows all of the requests that a webpage makes in order to fully load. In order to properly troubleshoot you'll need to have Chrome and Wireshark running on your machine. Wireshark will need to be capturing on the interface that the computer will be sending traffic through. You'll also want to have chrome://net-internals open when you start troubleshooting. 

Steps to Troubleshoot

Add Connections ID to Devtools  

Open the Chrome menu and navigate to Developer Tools in the More Tools section.

image.png

 

Once Devtools has opened a window pane will start populating data. We want to focus on the network tab. Loading the meraki.cisco.com webpage, we can see multiple page resources that were loaded by the browser.

Screen Shot 2017-10-24 at 7.59.50 PM.png

 

Once Devtools has opened a window pane will start populating data. We want to focus on the network tab. Loading the meraki.cisco.com webpage we can see multiple page resources that were loaded by the browser.

Screen Shot 2017-10-24 at 8.03.50 PM.png

 

Now we can add a column for Connection ID. 

Screen Shot 2017-10-24 at 8.07.43 PM.png

 

 

Note the Connection ID that you want to troubleshoot. 

Screen Shot 2017-10-24 at 8.15.59 PM.png

 

Find the Source Port of the Connection ID  

Open chrome://net-internals/#events and search id:111111 (where 111111 is the connection id). If this page isn't open when you got the connection ID then you'll need to refresh the page you're troubleshooting and get the connection id again. 
Screen Shot 2017-10-24 at 8.16.53 PM.png


You'll now be able to see source port of the TCP connection. 
sourceport.png

Analyze the TCP Flow in Wireshark


With the source port you can now filter for the connection with the filter tcp.port == SRCPORT. This will allow you to effectively filter the connection from the browser to the server. Screen Shot 2017-10-24 at 8.25.45 PM.png