Отладка JavaScript

© IGP, декабрь 2024 г.

Консоль разработчика

Для WEB-обозревателей: «Инструменты разработки» (Developer tools).

Для Node: объект console

Developer tools можно запустить нажав F12

Под сообщением об ошибке находится синий символ >. Он обозначает командную строку, в ней мы можем редактировать и запускать JavaScript-команды. Для их запуска нажмите Enter.

Объект console

						
							console.log("Failed to open the specified link");
						
					

Visual studio code | Codium

						console.assert()
						console.clear()
						console.count()
						console.countReset()
						console.debug()
						console.error()
						console.group()
						console.info()
						console.log()
						console.table()
						console.time()
						console.timeEnd()
						console.warn()
					

						
							var someObject = { str: "Some text", id: 5 };
							console.log(someObject);
						
					

[09:27:13.475] ({str:"Some text", id:5})

						
							var car = "Dodge Charger";
							var someObject = { str: "Some text", id: 5 };
							console.info("My first car was a", car,
										". The object is: ", someObject);
						
					

						
							[09:28:22.711] My first car was a Dodge Charger . The object is:  ({str:"Some text", id:5})
						
					

Преобразование строк с использованием масок

						
							for (let i=0; i < 5; i++) {
							  console.log("Hello, %s. You've called me %d times.", 
										"Bob", i+1);
							}
						
					

						[13:14:13.481] Hello, Bob. You've called me 1 times.
						[13:14:13.485] Hello, Bob. You've called me 3 times.
						[13:14:13.487] Hello, Bob. You've called me 4 times.
						[13:14:13.488] Hello, Bob. You've called me 5 times.
					

Стилизация вывода консоли

						
							console.log("This is %cMy stylish message",
								"color: yellow; font-style: italic; background-color: blue; padding: 2px;",
							);
						
					

Группирование вывода в консоли

						
							console.log("This is the outer level");
							console.group();
							console.log("Level 2");
							console.group();
							console.log("Level 3");
							console.warn("More of level 3");
							console.groupEnd();
							console.log("Back to level 2");
							console.groupEnd();
							console.debug("Back to the outer level");
						
					

Таймеры

						
							console.time("answer time");
							alert("Click to continue");
							console.timeEnd("answer time");
						
					

Трассировка стека вызова

						
							foo();

							function foo() {
							  function bar() {
								console.trace();
							  }
							  bar();
							}
						
					

Console.log или alert

						
							const a = { id: 1, value: 'one text' }
							alert(a)
							// [object Object]
						
					

						
							const a = { id: 1, value: 'one text' }
							console.log(a)
							// Object { id: 1, value: "one text" }
						
					

console.table

						
							const data = [
							  { section: 'HTML', count: 212 },
							  { section: 'CSS', count: 121 },
							  { section: 'JavaScript', count: 182 },
							  { section: 'Tools', count: 211 },
							]
							console.table(data)
						
					

						
							┌─────────┬──────────────┬───────┐
							│ (index) │   section    │ count │
							├─────────┼──────────────┼───────┤
							│    0    │    'HTML'    │  212  │
							│    1    │    'CSS'     │  121  │
							│    2    │ 'JavaScript' │  182  │
							│    3    │   'Tools'    │  211  │
							└─────────┴──────────────┴───────┘
						
					

						
							const language = 'JavaScript'
							const count = 100

							console.log('language:', language, 'count:', count)
							// language: JavaScript count: 100
						
					

						
							const language = 'JavaScript'
							const count = 100

							console.log({ language, count })
							// { language: 'JavaScript', count: 100 }