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:
Devtools source panel:
Press F12 in default and open devtools
Points to remember:
- Right click and click “Reveal in Navigator” – we can see the structure of your project
- Check Scope section in debugger for local, closure and global scope
- 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.
5.create snippets that allows developers to play with 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.
Simple example from Egghead:
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.
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.
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.