Debug JavaScript in Google Chrome. Using debugger

Programming, development, testing

→

JavaScript - programming language for HTML

→

Debug JavaScript in Google Chrome. Using debugger

Looked at 4911 times

Debug JavaScript in Google Chrome. Using debugger

last updated: 1 Augusta 2023

To debug the code in JavaScript or see the values of the variables, write:
debugger

Example

Step 1 Let's create a new file

Html File D:/1.html

<html>
<body>

<b>This is my Example!</b>

<script>
     function Show(text)
     {
          var a = 5;
          debugger;
     }

     Show("Hello");
</script>

</body>
</html>

Step 2 Open Google Chrome and write the path D:/1.html

Step 3 Click More tools → Developer tools

Step 4 Click on the tab Sources

Note! If the debugger didn't work

Click F5 (reload page)

← Previous topic
Create a new application JavaScript in Visual Studio Code. Debug the application. See in debugging how to perform JavaScript

Next topic →
How to find out (see) where the error is when executing HTML, JavaScript in Google Chrome

Your feedback ... Comments ...

Объявления

• In which editor (program) is it convenient to write JavaScript code?

New app

• Create a new application JavaScript in a text editor

• Create a new application JavaScript in Visual Studio Code. Debug the application. See in debugging how to perform JavaScript

Debugging JavaScript, HTML

• Debug JavaScript in Google Chrome. Using debugger

• How to find out (see) where the error is when executing HTML, JavaScript in Google Chrome

• Debugging JavaScript in the Google Chrome. Use console.log("Hello!")

JavaScript стандарт ES5. Издан в 2009 году. Поддерживается всеми браузерами

Function

• Function in the JavaScript. Example: function CalculateSum(value1, value2) { ... } | standard ES5

• Function return || in the JavaScript. Example: function getPersonName(name) { return name || "Evgen" } | standard ES5

• Call a function before it is defined (Hoisting) in the JavaScript | standard ES5

• Variables within a function (lifetime of variables within a function) JavaScript | standard ES5

• Pass parameters by value and by reference to the function in the JavaScript | standard ES5

• How to find out... whether there is a function by name in the JavaScript? Example: typeof calcSum == "function" | standard ES5

• The function described inside the function. JavaScript | standard ES5

Unnamed function

• Unnamed function in the JavaScript . Using an unnamed function: create a new variable and assign an unnamed function to a new variable. Example: var myFunc1 = function (a, b) { return a + b; } ; | standard ES5

• Unnamed function in the JavaScript . Using an unnamed function: pass an unnamed function as a parameter to another function. Example: Calculate(15, 7, function(v1, v2) {return v1+v2;}); | standard ES5

Само-вызывающая безымянная функция

• Self-calling unnamed function in the JavaScript. Where is it used? Used in Yandex advertising. Example: ( function(){ ... } )(); | standard ES5

• Create a file js with an object containing export variables and functions. This is an example of using a self-calling unnamed function | standard ES5

Lambda function (abbreviated version of the unnamed function)

• Lambda function in the JavaScript . Use the lambda function. [Example1] var myFunc1 = (a, b) => a + b; [Example2] Calculate(15, 7, (v1, v2) => {return v1+v2;}); | standard ES5

Variables

• Variables in the JavaScript (text, number, flag, date and time) | standard ES5

• Accessing Variables Before Defining Them (Hoisting) in the JavaScript | standard ES5

• Variable scope var, let, const in the JavaScript | standard ES5

Text, strings in the JavaScript

• Text in the JavaScript. Class String. Example: var myText = String("World"); | standard ES5

• Length (string length in the JavaScript) | standard ES5

• Function replace(text1, text2) replace text in the JavaScript | standard ES5

• Function toUpperCase() converts text to uppercase JavaScript | standard ES5

• Function toLowerCase() lowercase text JavaScript | standard ES5

• Function split(delimiter) splits a string into substrings JavaScript | standard ES5

• Function charAt(position) get a symbol by position JavaScript | standard ES5

• Function substr(pos, len) returns a substring JavaScript | standard ES5

• Function slice(pos1, pos2) returns a substring JavaScript | standard ES5

• Function substring(pos1, pos2) returns a substring JavaScript | standard ES5

• Function indexOf(text, startPos) searches for a substring and returns an index JavaScript | standard ES5

• Function startsWith(text) Checks, whether the line begins with the specified substring JavaScript | standard ES5

• Function trim() remove spaces at the beginning and end of a line JavaScript | standard ES5

• Функция padStart(length, symbol) добавляет в начале строки символы до нужной длины строки JavaScript | стандарт ES5

• Функция padEnd(length, symbol) добавляет в конце строки символы до нужной длины строки JavaScript | стандарт ES5

• В текстовую переменную можно назначить текст как много строк. Пример: var myText = `Hello \n Thanks \n Bye` | JavaScript standard ES6

• In a text variable, you can write expressions with variables (formatting, string interpolation). Example: var myText = `Hello ${a}` | JavaScript standard ES6

Регулярные выражения

• Регулярные выражения в JavaScript | standard ES5

• Write a regular expression to remove all special characters except letters and numbers | Regex JavaScript | standard ES5

Numbers and mathematical functions

• Number in the JavaScript. Convert text to a number. Rounding a number. Convert hexadecimal to decimal. | standard ES5

• Mathematical functions from the library Math: Sin, cos, log, pow and so on in the JavaScript | standard ES5

Date & Time

• Date & Time (year, month, date, hours, minutes, seconds) in the JavaScript. Class Date | standard ES5

Array

• Array in the JavaScript This is [] or class Array | standard ES5

• Что значит 3 точки ...items | Пример 1: Math.max(...prices) | Пример 2: books.push(...items) | JavaScript, стандарт ES5

• Difference between push(items) and push(...items) | Adding an Array to an Array in the JavaScript | standard ES5

• Найти max цены в сложном массиве: [ {name:"Tomate", price:10}, {name:"Apple", price:17}, {name:"Orange", price:15} ] в JavaScript | стандарт ES5

• Найти min цены в сложном массиве: [ {name:"Tomate", price:10}, {name:"Apple", price:17}, {name:"Orange", price:15} ] в JavaScript | стандарт ES5

Collection Map and Set

• Collection "The key-meaning" in the JavaScript. Class Map | standard ES5

• Collection of unique values in the JavaScript. Class Set | standard ES5

Object {set of properties and functions}

• {} it's an object in the JavaScript. An object contains a set of properties and functions. Example var book = {Name: "Wizard of the Mediterranean", Price: 120}; | standard ES5

• {...} = объект в JavaScript заполняем из переменных класса или другим объектом. Пример: const {name, total, price} = b.myProps; | standard ES5

Class (it is a function using new) | стандарт ES5

• Class in the JavaScript this is a common constructor function. Such a constructor function contains simple data, objects, internal functions in the JavaScript. To create a class object, use new Example: function Book() { ... } ... var obj1 = new Book(); | стандарт ES5

• Encapsulating variables (hiding variables for access) in the function (as a class) in the JavaScript | standard ES5

• prototype - is a set of functions, variables for all instances of the class (as a function) in the JavaScript | standard ES5

try catch

• Why you need to use try and catch in the JavaScript? | standard ES5

Closing (closure) in the Javascript

• What are closures? (closure) in the JavaScript ? Standard ES5

Управление памятью в JavaScript

• Управление памятью в JavaScript | standard ES5

Examples of picture movement and animation

• Анимация человечка на месте. Используем HTML элемент <div>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes" | standard ES5

• Анимация человечка в движении (sprite). Используем HTML элементы <div>, <img>. Для анимации используем CSS стили: "animation", "background-image", "background-position", "keyframes" | standard ES5

• Рисуем картинку с движением. Используем HTML элемент <canvas>. Для движения используем JavaScript: var img = new Image(), img.src = url, drawImage, timer, window.setInterval | standard ES5

• Drawing a picture with movement and animation (sprite). Используем HTML элемент <canvas>. Для движения используем JavaScript: var img = new Image(), img.src = url, drawImage, timer, window.setInterval | standard ES5

Examples

• Как определить устройство (планшет, компьютер, телефон) сейчас используется в JavaScript, HTML | standard ES5

• Text Editor write in HTML, JavaScript | standard ES5

Do Popup using HTML and Javascript

• How to make a Popup window in a HTML page | Javascript, HTML, CSS

Моя игра (HTML, JavaScript)

• Моя игра "Wizard World" | HTML, JavaScript

PDF readers. Загрузка и отображение файла PDF (JavaScript, HTML)

• PDF reader. Загрузка и отображение файла PDF (adobe JavaScript, HTML) | PDF JavaScript implemented by Adobe

• PDF reader. Download and display a file PDF (JavaScript, HTML) | PDF JavaScript implemented by Mozilla

JavaScript стандарт ES6. Издан в 2015 году. Поддерживается НЕ всеми браузерами. Синонимы ES6, ES2015, ECMAScript 2015

• In a text variable, you can write expressions with variables (formatting, string interpolation). Example: var myText = `Hello ${a}` | JavaScript standard ES6

• class | Class in the JavaScript. Example: class Book {...} ... var obj1 = new Book(); | стандарт ES6

• promise in the JavaScript | standard ES6