Chrome DevTools ๊ณต์๋ฌธ์๋ฅผ ๋ณด๋ฉฐ ์ ๋ฆฌํ ๋ด์ฉ์ ๋๋ค ๐
๐ 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.
๐ There are many ways to open DevTools, because different users want quick access to different parts of the DevTools UI.
cmd + option + i
(mac) โญ๏ธcmd + option + c
cmd + option + j
๋ณดํต ์ฐ๋ฆฌ๊ฐ tab์ด๋ผ๊ณ ๋ถ๋ฅด๋๋ฐ, ๊ฐ๋ฐ์ ๋๊ตฌ์์์ ๋ช
์นญ์ panel
์ด๋ค โจ
* ์ํฉ์ ๋ง๊ฒ ์ ์ ํ panel์ ์ฐพ์์ ์ฌ์ฉํ๋ฉด ๋๋ค ๐
๊ถ๊ธํ ๋ถ๋ถ์ ๋๋๊ทธํด์ ๊ฒ์ฌ๋ฅผ ์ด๋ฉด! ๋ํธ๋ฆฌ์์ ํด๋น ๋ ธ๋๋ถ๋ถ์ด ํ์๋๋ค.
์ ์ฒด์ ์ธ HTML ๊ตฌ์ฑ์์๋ค์ ๋ณผ ์ ์๋ค.โจ
ํน์ inspect icon
์ ์ด์ฉํ์ฌ ์ํ๋ ์์๋ฅผ ํด๋ฆญํด์ฃผ๋ฉด ๋๋ค.
๋ํธ๋ฆฌ์์ double-click
ํ๋ฉด text๋ฅผ ํธ์งํ ์ ์๋ค.
node
์ attributes
๋ ์์ ํ ์ ์๋ค.
style
๋ ์ถ๊ฐํด์ค ์ ์๋ค.
DOM nodes๋ฅผ ์ฌ์ ๋ ฌํ ์ ์๋ค. (drag)
right-click
โ Scroll into view
ํด๋ฆญํ๋ฉด ํด๋น ์์๋ก ์คํฌ๋กค ์ด๋!์์๋ณ๋ก CSS ์์ฑ๊ฐ๋ค์ ๋ณผ ์ ์๋ค. ์ฐ์ ์์ ์์๋ก ๋ณด์ฌ์ฃผ๋ฉฐ, ํด๋น ์์๋ ๋ธ๋ผ์ฐ์ ํ๋ฉด์ ํ์๋ ๋๋ค!
โ ์ฐ์ ์์? ์ฌ๋ฌ ์ ํ์์ ๊ฑธ์ณ์ CSS์์ฑ์ด ์ ์ฉ๋์ด ์์๋, ๊ทธ ์ฐ์ ์์์ ๋ฐ๋ฅธ ์์๋ก ๋ณด์ฌ์ค๋ค. ๋ง์ฝ ๋ ๊ฐํ ์์ฑ์ด ์์ด์ ๋ฐ์์ด ์๋๊ฒ๋ค์ ์ค์ด ๊ทธ์ด์ ธ์๋ค.
inline style
> id
> class
> tag
์์์ ์๋ hover ๋ฅผ toggling
ํด๋ณผ ์ ์๋ค.
Box Model
๋ค์ ๊ฐ๋ค์ ๋ณผ ์ ์๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฝ์ํจ๋์์ ์คํ์์ผ ๋ณผ ์ ์๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๋ก HTML ์์๋ค์ ์กฐ์ํ๋ฉฐ ์คํํด๋ณผ ์ ์๋ค.
์ฝ์์์๋ ๋ค์ํ ๋ฉ์ธ์ง๋ค์ ํ์ธํ ์ ์๋ค. ๋๋ฒ๊น
ํ ๋ ์ด๊ฒ์ผ๋ก ํด๊ฒฐ!! ์์ฃผ์ค์! ๐ฅ
Log Warning
message
Log Error
message
Info
, Warnings
, Errors
๋ค์ ์ ํํด์ ๋ณผ ์ ์๋ค.Preserve log
๋ฅผ ์ฒดํฌํด์ฃผ๋ฉด ํ์ด์ง๋ฅผ ์๋ก๊ณ ์นจํด์ค๋ ๋ก๊ทธ๋ค์ด ์ฌ๋ผ์ง์ง ์๋๋ค!โ 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});
โ Clears the console.
๐ค๐ป If Preserve Log
is enabled, console.clear() is disabled!!
console.clear();
โ Prints a JSON representation of the specified object
.
console.dir(document.head);
โ Prints an XML representation of the descendants of node
.
console.dirxml(document);
console.error("I'm sorry, Dave. I'm afraid I can't do that.");
โ Prints a warning to the Console.
console.warn('warn');
โ 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([
{
first: 'Renรฉ',
last: 'Magritte',
},
{
first: 'Chaim',
last: 'Soutine',
birthday: '18930113',
},
{
first: 'Henri',
last: 'Matisse',
}
]);
โ 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(); //์ฌ์ด์์ ์คํ๋๋๊ฒ์ด ์ผ๋ง๋ ๊ฑธ๋ฆฌ๋์ง!
$0
๋ inspector์์ ๋ง์ง๋ง์ผ๋ก ์ ํ๋ element๋ฅผ ๋ณด์ฌ์ค๋ค.
$1
๋ด๊ฐ ์ด์ ์ ์ ํํ element ๋ณด์ฌ์ค๋ค. ~ $2
$3
$4
โ $0์ ์ง๊ธ ๋ด๊ฐ ์ ํํ๊ฑฐ ๋ณด์ฌ์ฃผ๋๊ฑฐ๊ณ ,
โ $1์ ๊ทธ์ (์ง์ )์ ์ ํํ๋ ์์๋ฅผ ๋ณด์ฌ์ค๋ค.
๐ค๐ป ๋ง์ฝ ์ด์ํฉ(์์์ ํ์ ํ๋ฒ๋ง ํ ๊ฒฝ์ฐ)์์ $2
๋ฅผ ํ๋ฉด โ undefined
๋์จ๋ค. ์๋ํ๋ฉด ๊ทธ์ ์ ์ ํํ๋๊ฒ ์์ผ๋๊น!
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 ์ ์ด๊ณณ์ ์ ๋ฆฌํ์ต๋๋ค ๐ซ