DEBUGGING Flashcards
are programs that allow a developer to
create, test and debug software.
Developer tools (“Development tools” or short “DevTools”)
Current browsers provide integrated developer tools, which allow to inspect a website. Mozilla and Chrome.
Browsers
What are the dev tools?
Elements
Console
Sources
Network
Performance
Memory
Application
Security
Lighthouse
Recorder
Performance Insights
a point in the program where the code will
stop executing. Use a line-of code breakpoint when you know the exact region of code that you need to investigate. DevTools always pauses before this line of code is run.
Breakpoint
BREAKPOINT MODIFICATION: open Chrome Developer Tools, select first tab called _______, then find the element on which you want to put breakpoint, right click on it and a context menu with several options for a breakpoint will be opened.
Elements
___________ Breakpoints will break the execution of any event whenever a child element of a selected node is modified. The modification can be a removal, addition, or change in child content.
Subtree modification
____________ Breakpoints are used for
debugging changes to attributes in an element.
They are triggered when an attribute is changed, added, or removed. Let’s change our example to style the text of a list item
whenever it is clicked.
Attribute modification
This DOM Breakpoint is
very straightforward, in
that it will pause
JavaScript execution if the
associated DOM node is
removed from the DOM
Tree. This includes when
an ancestor of the
associated DOM node is
removed from the DOM
Tree as well
Break on Node Removal
What can you do in elements?
Edit as HTML
Create/Duplicate Node
Delete Node
Copy as HTML
Change Pseudo-Class
Copy CSS Path/Copy XPath
▪ Inspect and change HTML Pages.
▪ Inspect animations.
▪ Enable to preview instant changes on
live browser.
▪ Check and capable to include non-permanent modification on the
applied and unused CSS/DOM on
each elements.
Elements
▪ act as our debug window that allows
us to handle JavaScript.
▪ Recognize the incorrect syntax, and
type of errors.
▪ reports the errors which are
encountered by the browser as it tries
to execute the code.
▪ View log messages.
Console
▪ Also known as debugger in Firefox.
▪ Provide the all resources of the
current page in the browser.
▪ Watches JavaScript code and
allows you to set breakpoints and
watch the value of variables.
Sources
IDENTIFY THE PARTS OF SOURCES
Filelist
Code Editor
Watch expressions and breakpoint
▪ make sure what all resources that are
being downloaded or uploaded are
being done as expected.
Network
NETWORK MONITOR (NETWORK LOGS)
- STATUS - http response
- TYPE - resource
- INITIATOR - hyperlink
- TIME - time request
- TIMELINE/WATERFALL - graphical representation