Files
.github
api-server
client
config
curriculum
docs
guide
arabic
chinese
english
3d
accessibility
agile
algorithms
android-development
angular
angularjs
apache
aspnet
bash
blender
blockchain
book-recommendations
bootstrap
bsd-os
bulma
c
canvas
certifications
chef
clojure
cloud-development
computational-genomics
computer-hardware
computer-science
containers
cplusplus
csharp
css
d3
data-science-tools
design-patterns
designer-tools
developer-ethics
developer-tools
devops
docker
documentation
drupal
electron
elixir
elm
erlang
fsharp
game-development
gatsbyjs
git
go
groovy
haskell
hibernate
html
ionic
java
javascript
additional-javascript-resources
advantages-and-disadvantages-of-javascript
angularjs-interview-questions
arguments
arithmetic-operation
arrow-functions
assignment-operators
async-messaging-with-rabbitmq-tortoise
await-promises
booleans
callback-functions
classes
closures
code-blocks
code-linting-in-javascript
comments
comparison-operators
concurrency-model-and-event-loop
conditional-ternary-operators
converting-strings-to-numbers
error-handling-and-try-catch-throw
es6
falsy-values
form-validation
function-composition
function-invocation
functions-list
get-timestamp
global-object
global-variables
higher-order-functions
html-dom
html-dom-getelementbyid-method
html-dom-innerhtml-property
html-dom-queryselector
if-else-statement
immediately-invoked-functions-expressions
immutable-types
location-object
location-reload-method
logical-operators
loops
manipulate-javascript-objects
manipulating-cookies
multiply-two-numbers-with-javascript
naming-convention-for-javascript
numbers
object-instantiation
onclick-event
onload-event
output
popup-boxes
promises
prototypes
random-method
regular-expressions-reference
rest-parameters
return-statements
scopes
semicolons
singleton-in-javascript
spread-syntax
standard-objects
strict-mode
switch-statements
template-literals
ternary-operator
this-reference
timing-events
truth-table
truthy-values
tutorials
add-new-properties-to-a-javascript-object
add-two-numbers-with-javascript
build-javascript-objects
comment-your-javascript-code
construct-javascript-objects-with-functions
create-a-javascript-slot-machine
create-decimal-numbers-with-javascript
debugging-javascript-with-browser-devtools
index.md
debugging-node-files-using-cli-commands
declare-javascript-objects-as-variables
declare-javascript-variables
decrement-a-number-with-javascript
delete-properties-from-a-javascript-object
detect-authentic-click-events
divide-one-number-by-another-with-javascript
finding-a-remainder-in-javascript
generate-random-fractions-with-javascript
generate-random-whole-numbers-with-javascript
get-current-url-in-javascript
give-your-javascript-slot-machine-some-stylish-images
how-to-create-a-countdown-timer
how-to-create-a-dropdown-menu-with-css-and-javascript
how-to-create-a-lightbox
how-to-create-a-slideshow
how-to-create-a-top-navigation-bar
how-to-create-an-accordion
how-to-create-popups
how-to-create-tabs
how-to-install-node-js-and-npm-on-windows
increment-a-number-with-javascript
invert-regular-expression-matches-with-javascript
iterate-with-javascript-for-loops
iterate-with-javascript-while-loops
javascript-for-loops-explained
page-redirects-using-javascript
perform-arithmetic-operations-on-decimals-with-javascript
store-multiple-values-in-one-variable-using-javascript-arrays
subtract-one-number-from-another-with-javascript
the-javascript-version-of-jquerygetjson
use-the-javascript-console
using-anonymous-functions-for-private-namespacing-in-your-javascript-apps
what-does-javascript-void-0-mean
write-reusable-javascript-with-functions
index.md
typeof
undefined-primitive-values
where-to
window-clearinterval-method
window-cleartimeout-method
window-confirm-method
window-localstorage
window-location
window-open-method
window-setinterval-method
window-settimeout-method
with
index.md
joomla
jquery
julia
kotlin
laravel
linux
logic
machine-learning
mathematics
meta
miscellaneous
mobile-app-development
mongodb
natural-language-processing
neovim
network-engineering
nginx
nodejs
optical-alignment
php
product-design
progressive-web-apps
puppet
python
r
react
react-native
redux
rest-api
robotics
rt-os
ruby
rust
sass
security
semantic-ui
software-engineering
sql
ssh
svg
svn
swift
terminal-commandline
tomcat
tools
typescript
typography
user-experience-design
user-experience-research
vagrant
vim
virtualbox
visual-design
voice
vue
vue-cli
web-augmented-reality
web-components
web-performance
web-virtual-reality
wordpress
working-in-tech
xml
portuguese
russian
spanish
mock-guide
news
tools
.editorconfig
.eslintignore
.eslintrc
.gitattributes
.gitignore
.node-inspectorrc
.prettierrc
.snyk
.travis.yml
.vcmrc
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE.md
README(french).md
README.md
docker-compose-shared.yml
docker-compose.yml
lerna.json
netlify.toml
package-lock.json
package.json
sample.env

88 lines
4.9 KiB
Markdown
Raw Normal View History

2018-10-12 15:37:13 -04:00
---
title: Debugging JavaScript with Browser Devtools
---
As a developer you will often want to debug code. You might have already used `console.log` in some of the challenges, which is the simplest way to debug.
In this article we will tell you some of the coolest tricks, to debug using the native debug-tools of the browsers.
## A brief insight into the FreeCodeCamp Code Editor:
Before jumping into debugging let's leak out some secret facts about that _awesome code checking engine_ at FCC.
2018-10-12 15:37:13 -04:00
We use a customized <a href='http://codemirror.net/mode/javascript/index.html' target='_blank' rel='nofollow'>CodeMirror</a>, as the code editor. A <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval' target='_blank' rel='nofollow'>`eval()` function</a> is used to evaluate the JavaScript code represented as a string from the editor. When `eval()` is called, browsers will natively execute your code. We will learn more why this secret is important in later sections of this article.
## Now moving on to the tricks:
## Google Chrome DevTools
Google Chrome is one of the most popular browsers with a built-in JavaScript engine called <a href='https://developers.google.com/v8/' target='_blank' rel='nofollow'>V8</a>, and offers a great toolset for developers called <a href='https://developer.chrome.com/devtools' target='_blank' rel='nofollow'>Chrome DevTools</a>. Visiting their <a href='https://developer.chrome.com/devtools/docs/javascript-debugging' target='_blank' rel='nofollow'>Complete JavaScript debugging guide</a> is highly recommended.
### 1 : Basics of DevTools
#### Launching the Chrome DevTools
Hit `F12`
. Alternatively you can press
`Ctrl` + `Shift` + `I`
on Windows and Linux or
`Cmd` + `Shift` + `I`
on Mac, or If you just love your mouse go to `Menu > More Tools > Developer Tools`.
#### Getting to know the `Sources` and the `console` tabs.
These two tabs are the perhaps going to be your best friends while debugging. The `Sources` tab can be used to visualize all the scripts that are on the webpage you are visiting. This tab has sections for the code window, file tree, call stack & watch windows, etc.
2018-10-12 15:37:13 -04:00
The `console` tab is where all of the log output goes. Additionally you can use the console tab's prompt to execute JavaScript code. Its kind of synonymous to the command prompt on Windows, or terminal on Linux.
_Tip : Toggle the console anytime in the DevTools using `Esc` key._
### 2 : Common Shortcuts and features
While you can visit the <a href='https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/shortcuts' target='_blank' rel='nofollow'>complete list of shortcuts</a>, below are a few that are most used:
Feature Windows, Linux Mac
Search for a keyword, regex is supported. `Ctrl`+`F``Cmd`+`F`
Search and Open a file `Ctrl`+`P``Cmd`+`P`
Jump to line `Ctrl`+`G`+`:line_no``Cmd`+`G`+`:line_no`
Add a breakpoint `Ctrl`+`B`, or click on the line no.`Cmd`+`B`, or click on the line no.
Pause / resume script execution `F8` `F8`
Step over next function call `F10` `F10`
Step into next function call `F11` `F11`
### 3 : Using a Source Map for our Code
One of the coolest feature that you will love is <a href='https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-dynamic-javascript' target='_blank' rel='nofollow'>debugging Dynamic Script</a>, on the fly, via <a href='https://developer.chrome.com/devtools/docs/javascript-debugging#source-maps' target='_blank' rel='nofollow'>Source Maps</a>.
Every script can be visualized in the Source tab of the DevTools. The source tab has all the JavaScript source files. But the code from the code editor is executed via `eval()`in a container simply called a virtual machine(VM) within the browser process.
As you might have guessed by now our code is actually a script that doesn't have a file name. So we don't see that in the Source tab.
2018-10-12 15:37:13 -04:00
> ![:sparkles:](//forum.freecodecamp.com/images/emoji/emoji_one/sparkles.png?v=2 ":sparkles:") **_Here comes the hack!_** ![:sparkles:](//forum.freecodecamp.com/images/emoji/emoji_one/sparkles.png?v=2 ":sparkles:")
We must leverage `Source Maps` to assign a name to the JavaScript from our editor. Its pretty simple:
Lets say we are on the <a href='https://www.freecodecamp.com/challenges/factorialize-a-number' target='_blank' rel='nofollow'>Factorialize</a> challenge, and our code looks like this:
function factorialize(num) {
if(num <= 1){
...
}
factorialize(5);
All we need to do is add `//# sourceURL=factorialize.js` to the top of the code, i.e the first line:
//# sourceURL=factorialize.js
function factorialize(num) {
if(num <= 1){
...
> ![:sparkles:](//forum.freecodecamp.com/images/emoji/emoji_one/sparkles.png?v=2 ":sparkles:") **_And Eureka that's it!_** ![:sparkles:](//forum.freecodecamp.com/images/emoji/emoji_one/sparkles.png?v=2 ":sparkles:")
Now open up the DevTools and search for the file name. Add break points, Debug away and enjoy!