4. Inspect Html
● View HTML live (Advance Version of View
Source)
● View Selected Source
● View XPATH,Selector,InnerHtml of Selected
Element
● Edit Html Element
● Add/Delete/Edit attributes of Html Element
● Break on Script that Changes Html Element
Note:Javascript Debugger should be Enabled
5. Tweak CSS
● Box Model View: To Evaluate
Height,Width,Padding,Border and Margin
● Shows all selectors impacting the element in
order of Specificity
● Allows to Edit style properties defined in the
selectors
(Note:properties part of css parser of the
browser specification are shown,Hacks are not
shown)
● Live Edit,Changes are shown on fly
6. Debug Javascript
● Javascript Console feature to inspect javascript
objects at run time.
● Useful Console API's
logging – Console.log
,Console.info,Console.warn,
debugging – Console.debug(),Console.dir(),
profiling –
console.time(),Console.timeEnd(),Console.profi
le,Console.profileEnd,Console.m
7. ● Debugging features presented in IDE are well
integrated here
1)Add Break point,To Stop script execution at
specific point in the script to take control.
2)Follow the Stack Trace of the methods
3)Add Expressions at break point,To Break on
Expressions
4)View all Break points
8. Break Points
● Standard BreakPoint – Script Panel ()
● Error Break Point – Console Panel (Enable
Break on Errors)
● Html Break Point – Html Panel (Enable Break
on Mutate)
● Dom Break Point – DOM Panel (View Element
in Dom Panel add Break Point)
● AjaxBreak Point – Net Panel
9. Net panel
● To view the Http Traffic Done on the web page
View all Ajax requests
View all Html/Css/JS/Images/Video files
downloaded
View the Request/Response Headers
