TIL 38 | Chrome DevTools 01- Elements, Console

Saemsol Yooยท2021๋…„ 1์›” 15์ผ
0

DevTools

๋ชฉ๋ก ๋ณด๊ธฐ
2/2

Chrome DevTools ๊ณต์‹๋ฌธ์„œ๋ฅผ ๋ณด๋ฉฐ ์ •๋ฆฌํ•œ ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค ๐Ÿ™‚

What is DevTools? and Why?

๐Ÿ“Ž Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, fater.

  • ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ œ๊ณตํ•˜๋Š” ํ•˜๋‚˜์˜ ๋„๊ตฌ(tool)๋กœ, chrome ๊ฐœ๋ฐœ์ž๋„๊ตฌ, IE ๊ฐœ๋ฐœ์ž ๋„๊ตฌ, Safari ๊ฐœ๋ฐœ์ž ๋„๊ตฌ. etc ๋“ฑ์ด ์žˆ๋‹ค.
  • ์›น ์‚ฌ์ดํŠธ๋ฅผ ์ฆ‰๊ฐ์ ์œผ๋กœ ์ˆ˜์ •ํ•˜๊ณ , ๋ฌธ์ œ ๋ฐœ์ƒ์‹œ์—๋Š” ์›์ธ์„ ํŒŒ์•…ํ•˜์—ฌ ๋น ๋ฅธ์†๋„๋กœ ๋” ๋‚˜์€ ์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค€๋‹ค.
  • ๋””๋ฒ„๊น…



Open DevTools

๐Ÿ“Ž There are many ways to open DevTools, because different users want quick access to different parts of the DevTools UI.

  • Open DevTools : cmd + option + i (mac) โญ๏ธ
  • Open Elements Panel : cmd + option + c
  • Open Console Panel : cmd + option + j



DevTools Panels

๋ณดํ†ต ์šฐ๋ฆฌ๊ฐ€ tab์ด๋ผ๊ณ  ๋ถ€๋ฅด๋Š”๋ฐ, ๊ฐœ๋ฐœ์ž ๋„๊ตฌ์—์„œ์˜ ๋ช…์นญ์€ panel ์ด๋‹ค โœจ
* ์ƒํ™ฉ์— ๋งž๊ฒŒ ์ ์ ˆํ•œ panel์„ ์ฐพ์•„์„œ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค ๐Ÿ™‚

  • Elements : HTML ์ฝ”๋“œ๋ฅผ ๋ถ„์„ํ•˜๊ณ  ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ๋Š” ๋„๊ตฌ ํŒจ๋„. DOM๊ณผ CSS๋„ ์กฐ์ž‘๊ฐ€๋Šฅ
  • Console : ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ ์ฆ‰์‹œ ์‹คํ–‰์‹œ์ผœ๋ณผ ์ˆ˜ ์žˆ๋Š” ํŒจ๋„
  • Network : http ๋„คํŠธ์›Œํฌ ํ†ต์‹  ํ™•์ธ
  • Application : ๋ธŒ๋ผ์šฐ์ € ์ €์žฅ์†Œ
  • ๊ทธ ๋ฐ–์— ๋” ์žˆ์ง€๋งŒ ์˜ค๋Š˜์€ ์—ฌ๊ธฐ๊นŒ์ง€!



1. Elements panel

1-1. Elements ํŒจ๋„์˜ ๊ธฐ๋Šฅ (HTML/DOM)

์š”์†Œ๊ฒ€์‚ฌ

  • ๊ถ๊ธˆํ•œ ๋ถ€๋ถ„์„ ๋“œ๋ž˜๊ทธํ•ด์„œ ๊ฒ€์‚ฌ๋ฅผ ์—ด๋ฉด! ๋”ํŠธ๋ฆฌ์—์„œ ํ•ด๋‹น ๋…ธ๋“œ๋ถ€๋ถ„์ด ํ‘œ์‹œ๋œ๋‹ค.

  • ์ „์ฒด์ ์ธ HTML ๊ตฌ์„ฑ์š”์†Œ๋“ค์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.โœจ

  • ํ˜น์€ inspect icon ์„ ์ด์šฉํ•˜์—ฌ ์›ํ•˜๋Š” ์š”์†Œ๋ฅผ ํด๋ฆญํ•ด์ฃผ๋ฉด ๋œ๋‹ค.


DOM ์ˆ˜์ •ํ•˜๊ธฐ

  • ๋”ํŠธ๋ฆฌ์—์„œ double-click ํ•˜๋ฉด text๋ฅผ ํŽธ์ง‘ํ•  ์ˆ˜ ์žˆ๋‹ค.

  • node ์™€ attributes ๋„ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

  • style ๋„ ์ถ”๊ฐ€ํ•ด์ค„ ์ˆ˜ ์žˆ๋‹ค.

  • DOM nodes๋ฅผ ์žฌ์ •๋ ฌํ•  ์ˆ˜ ์žˆ๋‹ค. (drag)


์š”์†Œ๋กœ ๋ฐ”๋กœ๊ฐ€๊ธฐ

  • right-click โ†’ Scroll into view ํด๋ฆญํ•˜๋ฉด ํ•ด๋‹น ์š”์†Œ๋กœ ์Šคํฌ๋กค ์ด๋™!



1-2. Elements ํŒจ๋„์˜ ๊ธฐ๋Šฅ (CSS)

์š”์†Œ์˜ CSS ์†์„ฑ ๋ณด๊ธฐ

  • ์š”์†Œ๋ณ„๋กœ CSS ์†์„ฑ๊ฐ’๋“ค์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. ์šฐ์„ ์ˆœ์œ„ ์ˆœ์„œ๋กœ ๋ณด์—ฌ์ฃผ๋ฉฐ, ํ•ด๋‹น ์š”์†Œ๋Š” ๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด์— ํ‘œ์‹œ๋„ ๋œ๋‹ค!
    โ†’ ์šฐ์„ ์ˆœ์œ„? ์—ฌ๋Ÿฌ ์„ ํƒ์ž์— ๊ฑธ์ณ์„œ CSS์†์„ฑ์ด ์ ์šฉ๋˜์–ด ์žˆ์„๋•Œ, ๊ทธ ์šฐ์„ ์ˆœ์œ„์— ๋”ฐ๋ฅธ ์ˆœ์„œ๋กœ ๋ณด์—ฌ์ค€๋‹ค. ๋งŒ์•ฝ ๋” ๊ฐ•ํ•œ ์†์„ฑ์ด ์žˆ์–ด์„œ ๋ฐ˜์˜์ด ์•ˆ๋œ๊ฒƒ๋“ค์€ ์ค„์ด ๊ทธ์–ด์ ธ์žˆ๋‹ค.
    inline style > id > class > tag

  • ์š”์†Œ์— ์žˆ๋Š” hover ๋ฅผ toggling ํ•ด๋ณผ ์ˆ˜ ์žˆ๋‹ค.

  • Box Model ๋“ค์˜ ๊ฐ’๋“ค์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.


์—ฐ๊ฒฐ๋œ stylesheet ๋ณด๊ธฐ

  • ์–ด๋–ค stylesheet ํŒŒ์ผ์—์„œ ์„ ์–ธ๋œ ์Šคํƒ€์ผ์ธ์ง€ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

์š”์†Œ์˜ CSS ์†์„ฑ ์ˆ˜์ •

  • ์š”์†Œ๋“ค์˜ ์Šคํƒ€์ผ์„ ์ˆ˜์ •ํ•ด์„œ ๋ฐ”๋กœ ๋ฐ˜์˜ํ•œ ๋ชจ์Šต์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๊ณ , Box Model์˜ ์‚ฌ์ด์ฆˆ๋„ ๋ณ€๊ฒฝํ•ด๋ณผ ์ˆ˜ ์žˆ๋‹ค.



2. Console panel

2-1. Console ํŒจ๋„์˜ ๊ธฐ๋Šฅ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‹คํ–‰

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ฝ˜์†”ํŒจ๋„์—์„œ ์‹คํ–‰์‹œ์ผœ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ HTML ์š”์†Œ๋“ค์„ ์กฐ์ž‘ํ•˜๋ฉฐ ์‹คํ–‰ํ•ด๋ณผ ์ˆ˜ ์žˆ๋‹ค.


log messages ๋ณด๊ธฐ

  • ์ฝ˜์†”์—์„œ๋Š” ๋‹ค์–‘ํ•œ ๋ฉ”์„ธ์ง€๋“ค์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค. ๋””๋ฒ„๊น…ํ• ๋•Œ ์ด๊ฒƒ์œผ๋กœ ํ•ด๊ฒฐ!! ์•„์ฃผ์ค‘์š”! ๐Ÿ”ฅ

  • Log Warning message

  • Log Error message


log messages filtering

  • Info, Warnings, Errors ๋“ค์„ ์„ ํƒํ•ด์„œ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.
    ๐Ÿคš๐Ÿป ์—ฌ๊ธฐ์„œ check๋ฅผ ํ’€์–ด์ค€๋‹ค๊ณ  ์—๋Ÿฌ๊ฐ€ ํ•ด๊ฒฐ๋˜๋Š”๊ฒŒ ์•„๋‹ˆ๋‹ค! ์ฝ˜์†”์ฐฝ์—์„œ ๊ฐ์ถฐ์ฃผ๋Š” ๊ฒƒ ๋ฟ์ด๋‹ค.

Console Settings

  • ์ด ์ค‘์—์„œ Preserve log ๋ฅผ ์ฒดํฌํ•ด์ฃผ๋ฉด ํŽ˜์ด์ง€๋ฅผ ์ƒˆ๋กœ๊ณ ์นจํ•ด์ค˜๋„ ๋กœ๊ทธ๋“ค์ด ์‚ฌ๋ผ์ง€์ง€ ์•Š๋Š”๋‹ค!



2-2. Console API Reference

console.assert(expression, object)

โ†’ Writes an error to the console when expression evaluates to false.

const x = 5;
const y = 3;
const reason = 'x is expected to be less than y';
console.assert(x < y, {x, y, reason});


console.clear()

โ†’ Clears the console.
๐Ÿคš๐Ÿป If Preserve Log is enabled, console.clear() is disabled!!

console.clear();

console.dir(object)

โ†’ Prints a JSON representation of the specified object.

console.dir(document.head);


console.dirxml(node)

โ†’ Prints an XML representation of the descendants of node.

console.dirxml(document);


console.error(object [, object, ...])

console.error("I'm sorry, Dave. I'm afraid I can't do that.");


console.warn(object [, object, ...])

โ†’ Prints a warning to the Console.

console.warn('warn');


console.group(label)

โ†’ Visually groups messages together until console.groupEnd(label) is called.

const label = 'Adolescent Irradiated Espionage Tortoises';
console.group(label);
console.info('Leo');
console.info('Mike');
console.info('Don');
console.info('Raph');
console.groupEnd(label);


console.table(array)

console.table([
  {
    first: 'Renรฉ',
    last: 'Magritte',
  },
  {
    first: 'Chaim',
    last: 'Soutine',
    birthday: '18930113',
  },
  {
    first: 'Henri',
    last: 'Matisse',
  }
]);


console.time([label])

โ†’ Starts a new timer. Call console.timeEnd([label]) to stop the timer and print the elapsed time to the Console.

console.time();
for (var i = 0; i < 100000; i++) {
  let square = i ** 2;
}
console.timeEnd(); //์‚ฌ์ด์—์„œ ์‹คํ–‰๋˜๋Š”๊ฒƒ์ด ์–ผ๋งˆ๋‚˜ ๊ฑธ๋ฆฌ๋Š”์ง€!



2-3. Utilities API Reference

$0 - $4

  • $0 ๋Š” inspector์—์„œ ๋งˆ์ง€๋ง‰์œผ๋กœ ์„ ํƒ๋œ element๋ฅผ ๋ณด์—ฌ์ค€๋‹ค.

  • $1 ๋‚ด๊ฐ€ ์ด์ „์— ์„ ํƒํ•œ element ๋ณด์—ฌ์ค€๋‹ค. ~ $2 $3 $4
    โ†’ $0์€ ์ง€๊ธˆ ๋‚ด๊ฐ€ ์„ ํƒํ•œ๊ฑฐ ๋ณด์—ฌ์ฃผ๋Š”๊ฑฐ๊ณ ,
    โ†’ $1์€ ๊ทธ์ „(์ง์ „)์— ์„ ํƒํ–ˆ๋˜ ์š”์†Œ๋ฅผ ๋ณด์—ฌ์ค€๋‹ค.

๐Ÿคš๐Ÿป ๋งŒ์•ฝ ์ด์ƒํ™ฉ(์š”์†Œ์„ ํƒ์„ ํ•œ๋ฒˆ๋งŒ ํ•œ ๊ฒฝ์šฐ)์—์„œ $2 ๋ฅผ ํ•˜๋ฉด โ†’ undefined ๋‚˜์˜จ๋‹ค. ์™œ๋ƒํ•˜๋ฉด ๊ทธ์ „์— ์„ ํƒํ–ˆ๋˜๊ฒŒ ์—†์œผ๋‹ˆ๊นŒ!


$ (money sign)

  • ์ œ์ด์ฟผ๋ฆฌ๋Š” ์•„๋‹ˆ์ง€๋งŒ ๋˜‘๊ฐ™์€ ํ˜•์‹์ด๋‹ค!


$_

  • ๊ฐ€์žฅ ๋งˆ์ง€๋ง‰์œผ๋กœ ์‹คํ–‰๋œ expression์˜ ๊ฐ’์„ ๋‹ค์‹œ ๋ณด์—ฌ์ค€๋‹ค.
In the following example, a simple expression (2 + 2) is evaluated. The $_ property is then evaluated, which contains the same value:



Network panel, Applicatoin panel ์€ ์ด๊ณณ์— ์ •๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค ๐Ÿ’ซ

profile
Becoming a front-end developer ๐ŸŒฑ

0๊ฐœ์˜ ๋Œ“๊ธ€