Debugging Javascript In Depth – Egghead Lessons Reference

Egghead explains..

If you’re writing apps that are targeting the browser, you likely know the pain and joy that is debugging. The pain is part of the process, and the joy is winning the battle and fixing the issue.

The goal is to minimize the pain and maximize the joy. Let’s get to the end game as quickly as possible, eh? 🙃

Luckily the last several years have seen massive improvements for web developers when it comes to debugging their applications. The Chrome Devtools have gone from useful to absolutely amazing and essential when creating web apps.

You’re probably familiar with the basics of using Devtools, but there is a lot of functionality that is often overlooked. We are releasing three short courses from mykola bilokonsky that are sure to give you new tools that will help make the journey from debugging pain to joy more quickly!

Please follow the following 3 links to get expertised in debugging:

https://egghead.io/courses/chrome-devtools-sources-panel

https://egghead.io/courses/chrome-devtools-network-panel

https://egghead.io/courses/using-chrome-developer-tools-elements

Devtools source panel:

https://egghead.io/lessons/tools-examine-a-running-app-with-the-chrome-debugger?course=chrome-devtools-sources-panel

Press F12 in default and open devtools

Points to remember:

  1. Right click and click “Reveal in Navigator” – we can see the structure of your project
  2. Check Scope section in debugger for local, closure and global scope
  3. Add watcher expressions(above call stack) to find the value of variable that bound to. Click on ‘+’ button on watch section to add a variable that changes value on difference scope.

debugging-javascript

4. SourceMap: Unbundle your javascript with source maps. If you enable source maps then it breaks bundle.js file into chunks and display with your structure folder i.e., it represents in components. If you unaware of enabling source maps in devtools then google it 😉

debugging-javascript1

5.create snippets that allows developers to play with devtools

https://egghead.io/lessons/tools-use-snippets-to-store-behaviors-in-chrome-devtools

Devtools make life easier to programmers to see DOM changes instantly by creating snippets.

Goto Sources from F12, click on snippets. create a new snippet,save and run to see my alert box on my page. Simple right? Try at your end now.

debugging-javascript2

Simple example from Egghead:

debugging-snippet

chrome-devtools-network-panel:

Handle ajax requests(xhr) in devtools->network. Hope everyone knew to play and work on this. If not, please have a look at below link.

https://egghead.io/lessons/tools-examine-ajax-requests-with-chrome-devtools?course=chrome-devtools-network-panel

https://egghead.io/lessons/tools-analyze-http-requests-and-responses-with-chrome-devtools

You can test slow network performance using throttling in devtools. Say your website loads very fast with wifi in office. Now you want to test your application performance on mobile devices with 2G/3G/4G data. Now how do you test in that way? Just go to devtools, open network tab and select throttling that you required to test based on speed. Thats it.

debugging-javascript3

tools-analyze-overall-network-traffic-using-overview-tool-in-chrome-devtools

https://egghead.io/lessons/tools-analyze-overall-network-traffic-using-overview-tool-in-chrome-devtools

click on overview button shows a big bar with milli seconds graph.If you want to see requests/response at particular time..just click on that place to see all like shown below.

debugging-javascript5

chrome-devtools-elements-panel:

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s