DEBUGGING Flashcards

1
Q

are programs that allow a developer to
create, test and debug software.

A

Developer tools (“Development tools” or short “DevTools”)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Current browsers provide integrated developer tools, which allow to inspect a website. Mozilla and Chrome.

A

Browsers

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What are the dev tools?

A

Elements
Console
Sources
Network
Performance
Memory
Application
Security
Lighthouse
Recorder
Performance Insights

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

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.

A

Breakpoint

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

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.

A

Elements

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

___________ 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.

A

Subtree modification

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

____________ 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.

A

Attribute modification

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

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

A

Break on Node Removal

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What can you do in elements?

A

Edit as HTML
Create/Duplicate Node
Delete Node
Copy as HTML
Change Pseudo-Class
Copy CSS Path/Copy XPath

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

▪ 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.

A

Elements

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

▪ 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.

A

Console

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

▪ 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.

A

Sources

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

IDENTIFY THE PARTS OF SOURCES

A

Filelist
Code Editor
Watch expressions and breakpoint

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

▪ make sure what all resources that are
being downloaded or uploaded are
being done as expected.

A

Network

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

NETWORK MONITOR (NETWORK LOGS)

A
  1. STATUS - http response
  2. TYPE - resource
  3. INITIATOR - hyperlink
  4. TIME - time request
  5. TIMELINE/WATERFALL - graphical representation
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

▪ recorded at runtime and tells how
the page performs when it is running,
as opposed to loading.
▪ general insight into how good is the
site’s general responsiveness.

A

Performance

17
Q

▪ to analyze and debug memory usage in
web applications.

A

Memory

18
Q

▪ It offers developers a
comprehensive set of tools for
managing various aspects of their
web applications, including service
workers, manifests, storage,
caching, cookies, and more.
▪ These tools are essential for
debugging, testing, and optimizing
web applications to deliver a better
user experience.

A

Application

19
Q

▪ insights into the security aspects of
their web applications.
▪ help developers identify and
resolve security issues in their web
applications, ensuring that they
adhere to best practices and
mitigate potential security
vulnerabilities.

A

Security

20
Q

▪ powerful tool designed to help developers
improve the quality and performance of
their websites.

A

Lighthouse

21
Q

▪ It allows developers to inspect and
debug web pages’ code in real-time

A

Recorder

22
Q

▪ It provides detailed information
about various aspects of a web
page’s performance, including
rendering, scripting, networking,
and memory usage.

A

Performance Insights