Breakpoints & Watch Expressions:
Some experience developers know how use Chorme Breakpoints and Watch Expression feature. For those who don’t know it here are the steps
- Open Developer Tools -> Sources Tab
- Select your JS File from the tree view on the left
- Select the line where you want to apply the breakpoint
- Click on the Line number shown on left side or right click on line number and choose Add Breakpoint
- Click on the + symbol on the Watch Expression window
- Enter the variable or expression you want to watch ( you can also write a statement)
Values will be shown when debug point is encountered.
Chrome also allows you put conditional breakpoints in addition to plain breakpoints. For example you have loop in your code and you only want to only break when i > 13. Here are the steps you can do achieve this:
- Go to Source tab of Chrome Developer tools
- Select your JS file
- Goto the line where you want to put breakpoint
- Right Click and select “Add Conditional Breakpoint”
- Enter the desired expression
This breakpoint is displayed in different color than usual blue and will only be effective on if this expression can be evaluated as true.
Pause on Exception:
Clicking this little button in the developer tool will make chrome stop execution anytime an exception arises in any your code.
Chrome allows you edit JS files at runtime and see them take effect without any need to refresh the page. So, it is possible for me to start with empty JS file and write code in chrome which is really good IDE as it has auto complete even for Siebel Native JS functions. Below are some screenshots to show runtime editing in action.
Once your changes are complete just hit CTRL + S and you changes should take effect on next execution iteration. Once done with changes you can copy and paste code back to the source.
In next post we will discuss how can we take his runtime editing to the next level with chrome workspaces and few more advanced debugging techniques.