# Debugging network requests <!-- Put the link to this slide here so people can follow --> slide: https://hackmd.io/p/template-Talk-slide --- We have a collaborative session please prepare laptop or smartphone to join! --- # How can we inspect any requests the browser is making on an HTML page? --- ## When to use the Network panel #### In general, use the Network panel when you need to make sure that resources are being downloaded or uploaded as expected. #### The most common use cases for the Network panel are: - Making sure that resources are actually being uploaded or downloaded at all. - Inspecting the properties of an individual resource, such as its HTTP headers, content, size, and so on --- ### 1. Open DevTools by pressing Control+Shift+J or Command+Option+J (Mac). The Console panel opens.  --- ### 2. Click the Network tab. The Network panel opens. ##### (Right now the Network panel is empty. That's because DevTools only logs network activity while it's open and no network activity has occurred since you opened DevTools.)  --- ### 3. Reload the page. The Network panel logs all network activity in the Network Log.  --- ## The Network Log #### Each row of the Network Log represents a resource. #### Each column represents information about a resource: - Status: The HTTP response code. - Type: The resource type. - Initiator: What caused a resource to be requested. (Clicking the Initiator takes you to the source code that caused the request). --- - Time: How long the request took. - Waterfall: A graphical representation of the different stages of the request. --- ### What is DOMContentLoaded and load events ? <p> <b>DOMContentLoaded</b> event is fired when the browser parsed and loaded the html file.</br></br> The <b>load</b> event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images. This is in contrast to DOMContentLoaded, which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading. </p> --- #### DevTools displays the timing of the DOMContentLoaded and load events in multiple places on the Network panel. The DOMContentLoaded event is colored blue, and the load event is red. <img src="https://i.imgur.com/JEkJyqI.png" width="650"> --- ## Jeires What is Insomnia? Insomnia is a REST client for debugging APIs that has an app available for Mac, Windows and Linux. If you aren’t familiar with what a REST client is, it’s essentially a way to make web based requests to a service or API endpoint. In a way, the browser you’re using right now to read this is a REST client. You are requesting this page, downloading the response from the server and doing something with that data. In a browser, that data is being displayed as HTML (for the most part). What Insomnia does is allows you to make requests and view that data directly. In most APIs you’ll also need to authenticate yourself in some fashion. Insomnia makes it incredibly easy to make API requests using whatever authentication your service might be requiring. - Bind with each page - Manipulate DOM - Add event listeners - Isolated JavaScript environment - It doesn't break things --- # :fork_and_knife: --- <style> code.blue { color: #337AB7 !important; } code.orange { color: #F7A004 !important; } </style> - <code class="orange">onMessage('event')</code>: Register event listener - <code class="blue">sendMessage('event')</code>: Trigger event --- # :bulb: --- - Dead simple API - Only cares about application logic --- ```typescript import * as Channeru from 'channeru' // setup channel in different page environment, once const channel = Channeru.create() ``` --- ```typescript // in background script const fakeLogin = async () => true channel.answer('isLogin', async () => { return await fakeLogin() }) ``` <br> ```typescript // in inject script const isLogin = await channel.callBackground('isLogin') console.log(isLogin) //-> true ``` --- # :100: :muscle: :tada: --- ### Wrap up - Cross envornment commnication - A small library to solve messaging pain - TypeScript Rocks :tada: --- ### Thank you! :sheep: You can find me on - GitHub - Twitter - or email me