際際滷

際際滷Share a Scribd company logo

Devtools

D
Dmitrii Stoian

Devtools

1 of 28
Instrumente DEVTools
仆仄亠仆 舒亰舒弍仂亳从舒 仂亟亠仍仆亠 仗仂亞舒仄仄 亳仍亳 于仂亠仆仆亠 亠亠仆亳 亟仍 于仗仂仍仆亠仆亳 亠 亳仍亳 亳仆 亰舒亟舒, 于磶舒仆仆 仂亰亟舒仆亳亠仄 亳仍亳 舒亶仂于.
Chrome DevTools 仗仂亰于仂仍磳 仆亠 仂仍从仂 亰仆舒于舒 亳 仄亠仆 仗舒从亳亠从亳 仍ﾐ英亠 仍亠仄亠仆 于亠弍-舒仆亳 "仆舒 仍亠", 仆仂 舒从亢亠 亳仄亠亠 JavaScript-从仂仆仂仍, 仄仍仂 从舒仆仂于 舒亰仍亳仆 仂亶于 亳 亠仍亶 磲 亟亳舒亞仆仂亳亠从亳 亳仆仄亠仆仂于 亟仍 舒亟亳舒 亳 仂仗亳仄亳亰舒亳亳 亰舒亞亰从亳 舒亶仂于.
亰仂于 亳仆仄亠仆仂于 舒亰舒弍仂亳从舒 亳 仗亠亟舒于仍亠仆亳 舒仆亳 亰 仂仆仂于仆仂亞仂 仄亠仆. 仍亳从舒亠仄 仗仂 从仆仂仗从亠 仄亠仆 (亳 仂从亳 于 仗舒于仂仄 于亠仆亠仄 亞仍 仂从仆舒 弍舒亰亠舒), 仆舒于仂亟亳仄 从仂 仆舒 于仗舒亟舒ﾑ亳亶 仗亳仂从 "仂仗仂仍仆亳亠仍仆亠 亳仆仄亠仆" 亳 于 仆仄 仆舒亢亳仄舒亠仄 仗仆从 "仆仄亠仆 舒亰舒弍仂亳从舒". 仂亳仄亳 从仍舒于亳舒仄亳. 仍 于亰仂于舒 仄仂亢仆仂 仆舒亢舒 从仆仂仗从 F12 亳仍亳 从仂仄弍亳仆舒亳 CTRL+SHIFT+I. 亰 从仂仆亠从仆仂亞仂 仄亠仆 (仆舒亳弍仂仍亠亠 亟仂弍仆仂 亟仍 亳仆仗亠从亳亳 从仂仆从亠仆 仍亠仄亠仆仂于 舒仆亳). 舒亢亳仄舒亠仄 仗舒于仂亶 从仆仂仗从仂亶 仄亳 仗仂 仆亢仆仂仄 仂弍亠从 仆舒 于亠弍-舒仆亳从亠 亳 于弍亳舒亠仄 仗仆从 "仂仄仂亠 从仂亟" (亳仍亳 "仍亠亟仂于舒 仍亠仄亠仆" 于 仆亠从仂仂 弍仂仍亠亠 舒仆仆亳 于亠亳 丱仂仄舒).
Devtools
从仍舒亟从舒 Elements 仂亰于仂仍磳 仗仂仄舒亳于舒 亳 弍仂 仄亠仆 HTML 亳 CSS-从仂亟 舒亰仍亳仆 仍亠仄亠仆仂于 于亠弍- 舒仆亳. 丼仂弍 于弍舒 仍亠仄亠仆, 亟仂舒仂仆仂 舒从亳于亳仂于舒 仗亠于 从仆仂仗从 于 仍亠于仂亶 舒亳 仗舒仆亠仍亳 ("Select an element in the page to inspect it") 亳 从仂仂仄 仄从亳 从仆 于 仆亢仆亶 舒亞仄亠仆 舒仆亳.
从仍舒亟从舒 Elements Computed 仂仂弍舒亢舒亠 仄仂亟亠仍 于弍舒仆仆仂亞仂 弍仍仂从舒 亳 于亳仍亠仆仆亠 亟仍 仆亠亞仂 舒于仂仄舒亳亠从亳 亳仍亳, 从仂仂亠 磦仆仂 仆亠 亰舒亟舒仆 亳仍亳 弍仍亳 仆舒仍亠亟仂于舒仆 仂 仂亟亳亠仍从亳 弍仍仂从仂于; Event Listeners 于于仂亟亳 仗亳仂从 仆从亳亶, "仍舒ﾑ亳" 仂仗亠亟亠仍仆仆亠 仂弍亳 亟仍 于亠亶 舒仆亳 亳仍亳 从仂仆从亠仆仂 于弍舒仆仆仂亞仂 弍仍仂从舒 (仆亢仆仂 仆 亞舒仍仂从 ; DOM Breakpoints 仂亟亠亢亳 舒从 仆舒亰于舒亠仄亠 "仂从亳 仂舒仆仂于从亳" DOM (仂从. 舒仆亞仍. "Document Object Model" "仂弍亠从仆舒 仄仂亟亠仍 亟仂从仄亠仆舒"), 从仂仂亠 仄仂亢仆仂 仂亰亟舒于舒 亳亰 从仂仆亠从仆仂亞仂 仄亠仆 HTML- 从仂亟舒 (亞仗仗舒 "Break on") 仗亳 亠亞仂 仄仂亟亳亳从舒亳亳 亟仍 弍仂亶 仂仄亠仆/仗亳仄亠仆亠仆亳 于仆亠仆仆 仗舒于仂从; Properties 仗仂亰于仂仍磳 仗仂仄仂亠 仗仂仍仆亶 仗亳仂从 JavaScript-于仂亶于 亟仍 于弍舒仆仆仂亞仂 弍仍仂从舒 仆舒 舒仆亳从亠; Accessibility 仗仂从舒亰于舒亠 亳亠舒亳亠从亳亶 仂于亠仆 于仍仂亢亠仆仆仂亳 亟仍 于弍舒仆仆仂亞仂 弍仍仂从舒 弍亠亰 舒 亳仗仂于 弍仍仂从仂于, 亳 从仍舒仂于, 亳亟亠仆亳亳从舒仂仂于 亳仍亳 亳仆 舒舒从亠亳亳从.
仂仆仂仍 仂仆仂仍 仄仂亢亠 于仗仂仍仆 舒亰 亟于亠 仆从亳亳: 仄仂仆亳仂亳仆亞 仂弍亳亶 仆舒 舒仆亳亠 仂仂弍舒亢亠仆亳亠仄 仗亠亟仗亠亢亟亠仆亳亶 亳 仂亳弍仂从, 舒 舒从亢亠 亳仗仂仍仆亠仆亳亠 JavaScript-从仂仄舒仆亟, 于于亠亟仆仆 仗仂仍亰仂于舒亠仍亠仄. 亊于仆仂 于仗仂仍仆磳 仗亠于舒 仆从亳. 于于仂亟亠 从仂仆仂仍亳 于亠 仂弍亳 亞仗仗亳ﾑ 仆舒 亳 从舒亠亞仂亳亳 舒亰仆仄 于亠仂仄 仂仆舒: 亠仍亶 "仂从亳" 仂弍 仗亠仆仂 于仗仂仍仆亠仆仆 仂弍亳. 仍亶 仗亠亟仗亠亢亟亠仆亳 仂 于仂亰仄仂亢仆 仆亠从亳亳亠从亳 仂亳弍从舒 亳 弍仂. 舒仆亶 仂亳弍从亳 于 于仗仂仍仆亠仆亳亳 从亳仗仂于 亳仍亳 于 亟仂仗亠 从 仂仗亠亟亠仍仆仆仄 亰舒仗舒亳于舒亠仄仄 亠舒仄.
亳弍从亳 亳 仗亠亟仗亠亢亟亠仆亳 仂亟亠亢舒 于 亠弍亠 从舒从仂亠 仂仗亳舒仆亳亠 仗仂弍仍亠仄 亳 仍从 仆舒 舒亶仍 亳 仂从 于 仆仄, 从仂仂舒 仗仂弍仍亠仄 于亰于舒亠. 仆舒 仂仆亶 舒亟亠 于仂亰仆亳从仆仂于亠仆亳 仆亠仗仂仍舒亟从亳 (仗亳 仍仂于亳亳, 仂 仂仆舒 于仂亰仆亳从舒亠 于 舒亶仍亠 仆舒 舒亠仄 亠于亠亠), 仄仂亢亠亠 弍仂 仍仂从舒仍亳亰仂于舒 亳 舒仆亳 仂亳弍从.
从仍舒亟从舒 Sources 亅舒 仗舒仆亠仍 仗仂亰于仂仍磳 仗仂仄仂亠 于亠 亠, 从仂仂亠 仗仂亟亞亢舒ﾑ 于仄亠亠 仂 舒仆亳亠亶. 舒亳仆从亳, 从亳仗, 舒弍仍亳 亳仍亠亶 于 仂 仄仂亢仆仂 于亟亠仍亳 亳 仗仂仄仂亠 于 舒弍仂亠亶 仂弍仍舒亳 (舒 从亳仗 仄仂亢仆仂 亠 亳 仗舒于亳)
Devtools
仂仄亳仄仂 仗仂仄仂舒 亠仂于 亳 仗舒于从亳 JavaScript (从舒亳, 仗亳 仂仄 仄仂亢仆仂 亳仗仂仍亰仂于舒 亳仆仄亠仆 亳亰 仗舒于仂亶 仗舒仆亠仍亳), 于从仍舒亟从舒 "Sources" 仗仂亰于仂仍磳 从舒亳于舒 仍ﾐ英亠 舒亶仍 仆舒 从仂仄仗ﾑ亠.
从仍舒亟从舒 "Network" 从仍舒亟从舒 "Network" 仗仂亰于仂仍磳 仗仂仄仂亠 舒亳亳从 亰舒亞亰从亳 于亠 仍亠仄亠仆仂于 亳仆仗亠从亳亠仄仂亶 于亠弍-舒仆亳, 舒 舒从亢亠 仆舒弍仍ﾐ莞委 亰舒 亰舒仗仂舒仄亳, 仂仗舒于仍磳仄仄亳 亠 于仂 于亠仄 舒弍仂.
仂仍亠仆仆亠 亠亰仍舒 仄仂亢仆仂 亳亰亳, 亳仗仂仍亰 亳仍舒亳 仂弍亳亶 仗仂 亳仗 仗亠亠亟舒于舒亠仄 亟舒仆仆, 仗仂 亳 舒亰仄亠, 于亠仄亠仆亳 亰舒亞亰从亳 亳 .仗. 仂仄亠 仂亞仂, 仄仂亢仆仂 仄仍亳仂于舒 亰舒亞亰从 舒仆亳 亳从于亠仆仆仄 仂亞舒仆亳亠仆亳亠仄 从仂仂亳, 仂仂于亠于ﾑ亳仄 亠仄 亳仍亳 亳仆仄 仄仂弍亳仍仆仄 亠礆 (于仗舒亟舒ﾑ亳亶 仗亳仂从 "Online").
从仍舒亟从舒 "Performance/Timeline 仂亰于仂仍磳 仂亠仆亳, 从舒从 仆舒亞亰从 仂亰亟舒 于亠弍-亠 仆舒 从仂仄仗ﾑ亠 仗仂仍亰仂于舒亠仍. 丼仂弍 仗仂仍亳 亟仂舒仂仆仂亠 亟仍 舒仆舒仍亳亰舒 从仂仍亳亠于仂 亟舒仆仆, 亟仂舒仂仆仂 亰舒仗亳于舒 舒弍仂 舒仆亳 于 亠亠仆亳亳 仄亳仆, 仗仂仍亠 亠亞仂 仂舒仆舒于仍亳于舒亠仄 亳 仄仂亳仄 亠亰仍舒
舒亳从亳 亳仄亠ﾑ 舒亰仆仂于亠仆亠 仄亠从亳, 仗仂亰于仂仍ﾑ亳亠 于亳亟亠, 从舒从亳亠 仗仂亠 仂仆亳仄舒ﾑ 弍仂仍亠 于亠亞仂 于亠仄亠仆亳 亳 亠仂于 从仂仄仗ﾑ亠舒 仆舒 仂礀亠仆亳亳 于亠亶 仗仂于亠从亳. 亠 亳 亟舒仆仆亠 舒从亢亠 仄仂亢仆仂 亳仗仂仍亰仂于舒 亟仍 仂仗亳仄亳亰舒亳亳 于亠弍-舒仆亳.
从仍舒亟从舒 "Memory" 仂 仄仂仍舒仆亳 仆舒 仆亠亶 仂仂弍舒亢舒亠 仂弍仂弍仆仆仂亠 亠从亠亠 仗仂亠弍仍亠仆亳亠 仗舒仄亳 仂从仂亶 舒仆亳亠亶. 仍亳 亢亠 舒仄 仆亢亠仆 亟亠舒仍仆亶 仂, 仄仂亢亠亠 亰舒仗亳 仗仂亠 亰舒仗亳亳, 舒仆舒仍仂亞亳仆亶 仂仄, 从仂仂亶 弍仍 仆舒 仗亠亟亟亳 于从仍舒亟从舒. 亠亰仍舒亠 仗仂仍亳亠 亟舒仆仆亠 仂弍仂 于亠 仗仂亠舒, 仗仂亠弍仍ﾑ亳 仂仗亠舒亳于仆 仗舒仄 从仂仄仗ﾑ亠舒
从仍舒亟从a "Application" 仍亳 舒仄 仆亢仆仂 亰仆舒, 仂 舒仆亳 于亠弍- 舒仆亳舒 于 亠亳, cookie-舒亶仍舒 亳仍亳 亳仆 仍仂从舒仍仆 舒仆亳仍亳舒, 舒仄 仆舒 于从仍舒亟从 "Application". 亟亠 于 仄舒从亳仄舒仍仆仂 仗仂仂 于 仍亠于仂亶 仗舒仆亠仍亳 于弍亳舒亠仄 亳仆亠亠ﾑ亠亠 仆舒 舒仆亳仍亳亠 亟舒仆仆, 舒 于 仂仆仂于仆仂亶 仂弍仍舒亳 仄仂亳仄 亠亞仂 仂亟亠亢亳仄仂亠. , 仂 舒舒从亠仆仂, 亰亟亠 亢亠 仄 仄仂亢亠仄 舒亰 仂 仂亟亠亢亳仄仂亠 仗舒于亳 亳 亟舒亢亠 仗仂仍仆仂 亟舒仍 (从仆仂仗从亳 "Clear all" 亳 "Delete selected")
从仍舒亟从舒 "Security" 弌亠亶舒 舒仍仂 仗舒从亳亠从亳 仆亠仂弍仂亟亳仄仂 亳仗仂仍亰仂于舒 仆舒 舒亶舒 亰舒亳仆仆亶 HTTPS- 仗仂仂从仂仍. 丼仂弍 仂亠仆亳 亠从亳于仆仂 亠亞仂 舒弍仂 亳 仗仂亠仆亳舒仍仆亠 弍亠亳 于 弍亠亰仂仗舒仆仂亳 于亠弍-舒仆亳, 仄仂亢仆仂 于仂仗仂仍亰仂于舒 于从仍舒亟从仂亶 "Security". 亟亠 仗仂仍亠 仗亠亠亰舒亞亰从亳 舒仆亳 仄 于亳亟亳仄 仂 仂 弍亠亰仂仗舒仆 亳 仂仗舒仆 亠舒 亳, 仂仂于亠于亠仆仆仂, 仄仂亢亠仄 仗亳仆 亟舒仍仆亠亶亳亠 仄亠 亟仍 舒仆亠仆亳 于磦仍亠仆仆 仆亠亟仂舒从仂于
从仍舒亟从舒 "Audits" 舒从仂仆亠, 于 亟仂于亠亠仆亳亠 从仂 于亠仄, Google Chrome 仄仂亢亠 亟舒 仆舒仄 仗舒从亳亠从亳亠 仂于亠 仗仂 仍亠仆亳 舒弍仂 舒亶舒. 仍 仂亞仂 仆亢仆仂 仗亠亠亶亳 仆舒 于从仍舒亟从 "Audits", 亰舒仗亳 亠亳仂于舒仆亳亠 亳 亟仂亢亟舒 亠亞仂 亰舒于亠亠仆亳. 仂 亠亰仍舒舒仄 舒亟亳舒 弍亟 仂仄亳仂于舒仆 亞舒亳从亳 亳 从仂仆从亠仆亠 亠从仂仄亠仆亟舒亳亳 仗仂 亟舒仍仆亠亶亠亶 仂仗亳仄亳亰舒亳亳 舒仆亳
Devtools
舒从亳从亳 于 console 弍仂 仍亠仄亠仆仂于 DOM $(tagName), $(.class), $(#id), $(.class#id) 于仂亰于舒舒ﾑ 仗亠于亶 仍亠仄亠仆 DOM $$(.className) 仗亠亟仂舒于亳 仆舒仄 仄舒亳于 于亠 仍亠仄亠仆仂于 舒仆亳 从舒亰舒仆仆仄 仗亳 亠 于亰仂于亠 亳仄亠仆亠仄 从仍舒舒 亠于舒舒亠仄 弍舒亰亠 于 亠从仂于亶 亠亟舒从仂 document.body.contentEditable=true
仂亳从 仂弍舒弍仂亳从仂于 仂弍亳亶, 仗亳于磶舒仆仆 从 仍亠仄亠仆 getEventListeners($(selector)) 仂仆亳仂亳仆亞 仂弍亳亶 仂仄舒仆亟舒 monitorEvents($(selector)) - 仄仂仆亳仂亳仆亞 于亠 仂弍亳亶, 于磶舒仆仆 仍亠仄亠仆仂仄, 从仂仂仂仄 仂仂于亠于亠 亠仍亠从仂. 仂仄舒仆亟舒 monitorEvents($(selector), eventName) 仗仂仂亢舒 仆舒 仗亠亟亟, 仆仂 仂仆舒 仆舒亠仍亠仆舒 仆舒 从仂仆从亠仆仂亠 仂弍亳亠. 仂仄舒仆亟舒 monitorEvents($(selector),[eventName1, eventName3',.]) 仗仂亰于仂仍磳 仆舒弍仍ﾐ莞委 亰舒 仆亠从仂仍从亳仄亳 于弍舒仆仆仄亳 仂弍亳礆亳
亰仄亠亠仆亳亠 于亠仄亠仆亳 于仗仂仍仆亠仆亳 舒亞仄亠仆舒 从仂亟舒 console.time('myTime'); //舒仗从舒亠 舒亶仄亠 仄亠从仂亶 myTime console.timeEnd('myTime'); //舒仆舒于仍亳于舒亠 舒亶仄亠 仄亠从仂亶 myTime //于仂亟: myTime:123.00 ms
于仂亟 亰仆舒亠仆亳亶 仗亠亠仄亠仆仆 于 于亳亟亠 舒弍仍亳
仂仄仂 从仂亟舒 仍亠仄亠仆舒 仂仄舒仆亟舒 inspect($(selector)) 仗仂亰于仂仍磳 仂从 从仂亟 仍亠仄亠仆舒, 仂仂于亠于ﾑ亠亞仂 亠仍亠从仂, 于 仗舒仆亠仍亳 Elements 亳仆仄亠仆仂于 舒亰舒弍仂亳从舒 Google Chrome. 于仂亟 仗亳从舒 于仂亶于 仍亠仄亠仆舒 dir($(selector))
亰仂于 仗仂仍亠亟仆亠亞仂 仗仂仍亠仆仆仂亞仂 亠亰仍舒舒 2+3+4 9 //- 亠亰仍舒 仄仄亳仂于舒仆亳 - 9 $_ 9 // 于仂亟亳 仗仂仍亠亟仆亳亶 仗仂仍亠仆仆亶 亠亰仍舒 $_ * $_ 81 // 丐舒从 从舒从 仗仂仍亠亟仆亳亶 亠亰仍舒 9, 仗仂仍舒亠仄 81 Math.sqrt($_) 9 // 于舒亟舒仆亶 从仂亠仆 亳亰 仗仂仍亠亟仆亠亞仂 亠亰仍舒舒, 从仂仂亶 弍仍 舒于亠仆 81 $_ 9 // 弌仆仂于舒 仗仂仍舒亠仄 9 亠亰仍舒 仗亠亟亟亠亞仂 于亳仍亠仆亳 亳从舒 从仂仆仂仍亳 亳 仗舒仄亳 clear()
https://www.youtube.com/watch?v=C8Z- N0y6Sqo

More Related Content

Devtools

  • 2. 仆仄亠仆 舒亰舒弍仂亳从舒 仂亟亠仍仆亠 仗仂亞舒仄仄 亳仍亳 于仂亠仆仆亠 亠亠仆亳 亟仍 于仗仂仍仆亠仆亳 亠 亳仍亳 亳仆 亰舒亟舒, 于磶舒仆仆 仂亰亟舒仆亳亠仄 亳仍亳 舒亶仂于.
  • 3. Chrome DevTools 仗仂亰于仂仍磳 仆亠 仂仍从仂 亰仆舒于舒 亳 仄亠仆 仗舒从亳亠从亳 仍ﾐ英亠 仍亠仄亠仆 于亠弍-舒仆亳 "仆舒 仍亠", 仆仂 舒从亢亠 亳仄亠亠 JavaScript-从仂仆仂仍, 仄仍仂 从舒仆仂于 舒亰仍亳仆 仂亶于 亳 亠仍亶 磲 亟亳舒亞仆仂亳亠从亳 亳仆仄亠仆仂于 亟仍 舒亟亳舒 亳 仂仗亳仄亳亰舒亳亳 亰舒亞亰从亳 舒亶仂于.
  • 4. 亰仂于 亳仆仄亠仆仂于 舒亰舒弍仂亳从舒 亳 仗亠亟舒于仍亠仆亳 舒仆亳 亰 仂仆仂于仆仂亞仂 仄亠仆. 仍亳从舒亠仄 仗仂 从仆仂仗从亠 仄亠仆 (亳 仂从亳 于 仗舒于仂仄 于亠仆亠仄 亞仍 仂从仆舒 弍舒亰亠舒), 仆舒于仂亟亳仄 从仂 仆舒 于仗舒亟舒ﾑ亳亶 仗亳仂从 "仂仗仂仍仆亳亠仍仆亠 亳仆仄亠仆" 亳 于 仆仄 仆舒亢亳仄舒亠仄 仗仆从 "仆仄亠仆 舒亰舒弍仂亳从舒". 仂亳仄亳 从仍舒于亳舒仄亳. 仍 于亰仂于舒 仄仂亢仆仂 仆舒亢舒 从仆仂仗从 F12 亳仍亳 从仂仄弍亳仆舒亳 CTRL+SHIFT+I. 亰 从仂仆亠从仆仂亞仂 仄亠仆 (仆舒亳弍仂仍亠亠 亟仂弍仆仂 亟仍 亳仆仗亠从亳亳 从仂仆从亠仆 仍亠仄亠仆仂于 舒仆亳). 舒亢亳仄舒亠仄 仗舒于仂亶 从仆仂仗从仂亶 仄亳 仗仂 仆亢仆仂仄 仂弍亠从 仆舒 于亠弍-舒仆亳从亠 亳 于弍亳舒亠仄 仗仆从 "仂仄仂亠 从仂亟" (亳仍亳 "仍亠亟仂于舒 仍亠仄亠仆" 于 仆亠从仂仂 弍仂仍亠亠 舒仆仆亳 于亠亳 丱仂仄舒).
  • 6. 从仍舒亟从舒 Elements 仂亰于仂仍磳 仗仂仄舒亳于舒 亳 弍仂 仄亠仆 HTML 亳 CSS-从仂亟 舒亰仍亳仆 仍亠仄亠仆仂于 于亠弍- 舒仆亳. 丼仂弍 于弍舒 仍亠仄亠仆, 亟仂舒仂仆仂 舒从亳于亳仂于舒 仗亠于 从仆仂仗从 于 仍亠于仂亶 舒亳 仗舒仆亠仍亳 ("Select an element in the page to inspect it") 亳 从仂仂仄 仄从亳 从仆 于 仆亢仆亶 舒亞仄亠仆 舒仆亳.
  • 7. 从仍舒亟从舒 Elements Computed 仂仂弍舒亢舒亠 仄仂亟亠仍 于弍舒仆仆仂亞仂 弍仍仂从舒 亳 于亳仍亠仆仆亠 亟仍 仆亠亞仂 舒于仂仄舒亳亠从亳 亳仍亳, 从仂仂亠 磦仆仂 仆亠 亰舒亟舒仆 亳仍亳 弍仍亳 仆舒仍亠亟仂于舒仆 仂 仂亟亳亠仍从亳 弍仍仂从仂于; Event Listeners 于于仂亟亳 仗亳仂从 仆从亳亶, "仍舒ﾑ亳" 仂仗亠亟亠仍仆仆亠 仂弍亳 亟仍 于亠亶 舒仆亳 亳仍亳 从仂仆从亠仆仂 于弍舒仆仆仂亞仂 弍仍仂从舒 (仆亢仆仂 仆 亞舒仍仂从 ; DOM Breakpoints 仂亟亠亢亳 舒从 仆舒亰于舒亠仄亠 "仂从亳 仂舒仆仂于从亳" DOM (仂从. 舒仆亞仍. "Document Object Model" "仂弍亠从仆舒 仄仂亟亠仍 亟仂从仄亠仆舒"), 从仂仂亠 仄仂亢仆仂 仂亰亟舒于舒 亳亰 从仂仆亠从仆仂亞仂 仄亠仆 HTML- 从仂亟舒 (亞仗仗舒 "Break on") 仗亳 亠亞仂 仄仂亟亳亳从舒亳亳 亟仍 弍仂亶 仂仄亠仆/仗亳仄亠仆亠仆亳 于仆亠仆仆 仗舒于仂从; Properties 仗仂亰于仂仍磳 仗仂仄仂亠 仗仂仍仆亶 仗亳仂从 JavaScript-于仂亶于 亟仍 于弍舒仆仆仂亞仂 弍仍仂从舒 仆舒 舒仆亳从亠; Accessibility 仗仂从舒亰于舒亠 亳亠舒亳亠从亳亶 仂于亠仆 于仍仂亢亠仆仆仂亳 亟仍 于弍舒仆仆仂亞仂 弍仍仂从舒 弍亠亰 舒 亳仗仂于 弍仍仂从仂于, 亳 从仍舒仂于, 亳亟亠仆亳亳从舒仂仂于 亳仍亳 亳仆 舒舒从亠亳亳从.
  • 8. 仂仆仂仍 仂仆仂仍 仄仂亢亠 于仗仂仍仆 舒亰 亟于亠 仆从亳亳: 仄仂仆亳仂亳仆亞 仂弍亳亶 仆舒 舒仆亳亠 仂仂弍舒亢亠仆亳亠仄 仗亠亟仗亠亢亟亠仆亳亶 亳 仂亳弍仂从, 舒 舒从亢亠 亳仗仂仍仆亠仆亳亠 JavaScript-从仂仄舒仆亟, 于于亠亟仆仆 仗仂仍亰仂于舒亠仍亠仄. 亊于仆仂 于仗仂仍仆磳 仗亠于舒 仆从亳. 于于仂亟亠 从仂仆仂仍亳 于亠 仂弍亳 亞仗仗亳ﾑ 仆舒 亳 从舒亠亞仂亳亳 舒亰仆仄 于亠仂仄 仂仆舒: 亠仍亶 "仂从亳" 仂弍 仗亠仆仂 于仗仂仍仆亠仆仆 仂弍亳. 仍亶 仗亠亟仗亠亢亟亠仆亳 仂 于仂亰仄仂亢仆 仆亠从亳亳亠从亳 仂亳弍从舒 亳 弍仂. 舒仆亶 仂亳弍从亳 于 于仗仂仍仆亠仆亳亳 从亳仗仂于 亳仍亳 于 亟仂仗亠 从 仂仗亠亟亠仍仆仆仄 亰舒仗舒亳于舒亠仄仄 亠舒仄.
  • 9. 亳弍从亳 亳 仗亠亟仗亠亢亟亠仆亳 仂亟亠亢舒 于 亠弍亠 从舒从仂亠 仂仗亳舒仆亳亠 仗仂弍仍亠仄 亳 仍从 仆舒 舒亶仍 亳 仂从 于 仆仄, 从仂仂舒 仗仂弍仍亠仄 于亰于舒亠. 仆舒 仂仆亶 舒亟亠 于仂亰仆亳从仆仂于亠仆亳 仆亠仗仂仍舒亟从亳 (仗亳 仍仂于亳亳, 仂 仂仆舒 于仂亰仆亳从舒亠 于 舒亶仍亠 仆舒 舒亠仄 亠于亠亠), 仄仂亢亠亠 弍仂 仍仂从舒仍亳亰仂于舒 亳 舒仆亳 仂亳弍从.
  • 10. 从仍舒亟从舒 Sources 亅舒 仗舒仆亠仍 仗仂亰于仂仍磳 仗仂仄仂亠 于亠 亠, 从仂仂亠 仗仂亟亞亢舒ﾑ 于仄亠亠 仂 舒仆亳亠亶. 舒亳仆从亳, 从亳仗, 舒弍仍亳 亳仍亠亶 于 仂 仄仂亢仆仂 于亟亠仍亳 亳 仗仂仄仂亠 于 舒弍仂亠亶 仂弍仍舒亳 (舒 从亳仗 仄仂亢仆仂 亠 亳 仗舒于亳)
  • 12. 仂仄亳仄仂 仗仂仄仂舒 亠仂于 亳 仗舒于从亳 JavaScript (从舒亳, 仗亳 仂仄 仄仂亢仆仂 亳仗仂仍亰仂于舒 亳仆仄亠仆 亳亰 仗舒于仂亶 仗舒仆亠仍亳), 于从仍舒亟从舒 "Sources" 仗仂亰于仂仍磳 从舒亳于舒 仍ﾐ英亠 舒亶仍 仆舒 从仂仄仗ﾑ亠.
  • 13. 从仍舒亟从舒 "Network" 从仍舒亟从舒 "Network" 仗仂亰于仂仍磳 仗仂仄仂亠 舒亳亳从 亰舒亞亰从亳 于亠 仍亠仄亠仆仂于 亳仆仗亠从亳亠仄仂亶 于亠弍-舒仆亳, 舒 舒从亢亠 仆舒弍仍ﾐ莞委 亰舒 亰舒仗仂舒仄亳, 仂仗舒于仍磳仄仄亳 亠 于仂 于亠仄 舒弍仂.
  • 14. 仂仍亠仆仆亠 亠亰仍舒 仄仂亢仆仂 亳亰亳, 亳仗仂仍亰 亳仍舒亳 仂弍亳亶 仗仂 亳仗 仗亠亠亟舒于舒亠仄 亟舒仆仆, 仗仂 亳 舒亰仄亠, 于亠仄亠仆亳 亰舒亞亰从亳 亳 .仗. 仂仄亠 仂亞仂, 仄仂亢仆仂 仄仍亳仂于舒 亰舒亞亰从 舒仆亳 亳从于亠仆仆仄 仂亞舒仆亳亠仆亳亠仄 从仂仂亳, 仂仂于亠于ﾑ亳仄 亠仄 亳仍亳 亳仆仄 仄仂弍亳仍仆仄 亠礆 (于仗舒亟舒ﾑ亳亶 仗亳仂从 "Online").
  • 15. 从仍舒亟从舒 "Performance/Timeline 仂亰于仂仍磳 仂亠仆亳, 从舒从 仆舒亞亰从 仂亰亟舒 于亠弍-亠 仆舒 从仂仄仗ﾑ亠 仗仂仍亰仂于舒亠仍. 丼仂弍 仗仂仍亳 亟仂舒仂仆仂亠 亟仍 舒仆舒仍亳亰舒 从仂仍亳亠于仂 亟舒仆仆, 亟仂舒仂仆仂 亰舒仗亳于舒 舒弍仂 舒仆亳 于 亠亠仆亳亳 仄亳仆, 仗仂仍亠 亠亞仂 仂舒仆舒于仍亳于舒亠仄 亳 仄仂亳仄 亠亰仍舒
  • 16. 舒亳从亳 亳仄亠ﾑ 舒亰仆仂于亠仆亠 仄亠从亳, 仗仂亰于仂仍ﾑ亳亠 于亳亟亠, 从舒从亳亠 仗仂亠 仂仆亳仄舒ﾑ 弍仂仍亠 于亠亞仂 于亠仄亠仆亳 亳 亠仂于 从仂仄仗ﾑ亠舒 仆舒 仂礀亠仆亳亳 于亠亶 仗仂于亠从亳. 亠 亳 亟舒仆仆亠 舒从亢亠 仄仂亢仆仂 亳仗仂仍亰仂于舒 亟仍 仂仗亳仄亳亰舒亳亳 于亠弍-舒仆亳.
  • 17. 从仍舒亟从舒 "Memory" 仂 仄仂仍舒仆亳 仆舒 仆亠亶 仂仂弍舒亢舒亠 仂弍仂弍仆仆仂亠 亠从亠亠 仗仂亠弍仍亠仆亳亠 仗舒仄亳 仂从仂亶 舒仆亳亠亶. 仍亳 亢亠 舒仄 仆亢亠仆 亟亠舒仍仆亶 仂, 仄仂亢亠亠 亰舒仗亳 仗仂亠 亰舒仗亳亳, 舒仆舒仍仂亞亳仆亶 仂仄, 从仂仂亶 弍仍 仆舒 仗亠亟亟亳 于从仍舒亟从舒. 亠亰仍舒亠 仗仂仍亳亠 亟舒仆仆亠 仂弍仂 于亠 仗仂亠舒, 仗仂亠弍仍ﾑ亳 仂仗亠舒亳于仆 仗舒仄 从仂仄仗ﾑ亠舒
  • 18. 从仍舒亟从a "Application" 仍亳 舒仄 仆亢仆仂 亰仆舒, 仂 舒仆亳 于亠弍- 舒仆亳舒 于 亠亳, cookie-舒亶仍舒 亳仍亳 亳仆 仍仂从舒仍仆 舒仆亳仍亳舒, 舒仄 仆舒 于从仍舒亟从 "Application". 亟亠 于 仄舒从亳仄舒仍仆仂 仗仂仂 于 仍亠于仂亶 仗舒仆亠仍亳 于弍亳舒亠仄 亳仆亠亠ﾑ亠亠 仆舒 舒仆亳仍亳亠 亟舒仆仆, 舒 于 仂仆仂于仆仂亶 仂弍仍舒亳 仄仂亳仄 亠亞仂 仂亟亠亢亳仄仂亠. , 仂 舒舒从亠仆仂, 亰亟亠 亢亠 仄 仄仂亢亠仄 舒亰 仂 仂亟亠亢亳仄仂亠 仗舒于亳 亳 亟舒亢亠 仗仂仍仆仂 亟舒仍 (从仆仂仗从亳 "Clear all" 亳 "Delete selected")
  • 19. 从仍舒亟从舒 "Security" 弌亠亶舒 舒仍仂 仗舒从亳亠从亳 仆亠仂弍仂亟亳仄仂 亳仗仂仍亰仂于舒 仆舒 舒亶舒 亰舒亳仆仆亶 HTTPS- 仗仂仂从仂仍. 丼仂弍 仂亠仆亳 亠从亳于仆仂 亠亞仂 舒弍仂 亳 仗仂亠仆亳舒仍仆亠 弍亠亳 于 弍亠亰仂仗舒仆仂亳 于亠弍-舒仆亳, 仄仂亢仆仂 于仂仗仂仍亰仂于舒 于从仍舒亟从仂亶 "Security". 亟亠 仗仂仍亠 仗亠亠亰舒亞亰从亳 舒仆亳 仄 于亳亟亳仄 仂 仂 弍亠亰仂仗舒仆 亳 仂仗舒仆 亠舒 亳, 仂仂于亠于亠仆仆仂, 仄仂亢亠仄 仗亳仆 亟舒仍仆亠亶亳亠 仄亠 亟仍 舒仆亠仆亳 于磦仍亠仆仆 仆亠亟仂舒从仂于
  • 20. 从仍舒亟从舒 "Audits" 舒从仂仆亠, 于 亟仂于亠亠仆亳亠 从仂 于亠仄, Google Chrome 仄仂亢亠 亟舒 仆舒仄 仗舒从亳亠从亳亠 仂于亠 仗仂 仍亠仆亳 舒弍仂 舒亶舒. 仍 仂亞仂 仆亢仆仂 仗亠亠亶亳 仆舒 于从仍舒亟从 "Audits", 亰舒仗亳 亠亳仂于舒仆亳亠 亳 亟仂亢亟舒 亠亞仂 亰舒于亠亠仆亳. 仂 亠亰仍舒舒仄 舒亟亳舒 弍亟 仂仄亳仂于舒仆 亞舒亳从亳 亳 从仂仆从亠仆亠 亠从仂仄亠仆亟舒亳亳 仗仂 亟舒仍仆亠亶亠亶 仂仗亳仄亳亰舒亳亳 舒仆亳
  • 22. 舒从亳从亳 于 console 弍仂 仍亠仄亠仆仂于 DOM $(tagName), $(.class), $(#id), $(.class#id) 于仂亰于舒舒ﾑ 仗亠于亶 仍亠仄亠仆 DOM $$(.className) 仗亠亟仂舒于亳 仆舒仄 仄舒亳于 于亠 仍亠仄亠仆仂于 舒仆亳 从舒亰舒仆仆仄 仗亳 亠 于亰仂于亠 亳仄亠仆亠仄 从仍舒舒 亠于舒舒亠仄 弍舒亰亠 于 亠从仂于亶 亠亟舒从仂 document.body.contentEditable=true
  • 23. 仂亳从 仂弍舒弍仂亳从仂于 仂弍亳亶, 仗亳于磶舒仆仆 从 仍亠仄亠仆 getEventListeners($(selector)) 仂仆亳仂亳仆亞 仂弍亳亶 仂仄舒仆亟舒 monitorEvents($(selector)) - 仄仂仆亳仂亳仆亞 于亠 仂弍亳亶, 于磶舒仆仆 仍亠仄亠仆仂仄, 从仂仂仂仄 仂仂于亠于亠 亠仍亠从仂. 仂仄舒仆亟舒 monitorEvents($(selector), eventName) 仗仂仂亢舒 仆舒 仗亠亟亟, 仆仂 仂仆舒 仆舒亠仍亠仆舒 仆舒 从仂仆从亠仆仂亠 仂弍亳亠. 仂仄舒仆亟舒 monitorEvents($(selector),[eventName1, eventName3',.]) 仗仂亰于仂仍磳 仆舒弍仍ﾐ莞委 亰舒 仆亠从仂仍从亳仄亳 于弍舒仆仆仄亳 仂弍亳礆亳
  • 24. 亰仄亠亠仆亳亠 于亠仄亠仆亳 于仗仂仍仆亠仆亳 舒亞仄亠仆舒 从仂亟舒 console.time('myTime'); //舒仗从舒亠 舒亶仄亠 仄亠从仂亶 myTime console.timeEnd('myTime'); //舒仆舒于仍亳于舒亠 舒亶仄亠 仄亠从仂亶 myTime //于仂亟: myTime:123.00 ms
  • 25. 于仂亟 亰仆舒亠仆亳亶 仗亠亠仄亠仆仆 于 于亳亟亠 舒弍仍亳
  • 26. 仂仄仂 从仂亟舒 仍亠仄亠仆舒 仂仄舒仆亟舒 inspect($(selector)) 仗仂亰于仂仍磳 仂从 从仂亟 仍亠仄亠仆舒, 仂仂于亠于ﾑ亠亞仂 亠仍亠从仂, 于 仗舒仆亠仍亳 Elements 亳仆仄亠仆仂于 舒亰舒弍仂亳从舒 Google Chrome. 于仂亟 仗亳从舒 于仂亶于 仍亠仄亠仆舒 dir($(selector))
  • 27. 亰仂于 仗仂仍亠亟仆亠亞仂 仗仂仍亠仆仆仂亞仂 亠亰仍舒舒 2+3+4 9 //- 亠亰仍舒 仄仄亳仂于舒仆亳 - 9 $_ 9 // 于仂亟亳 仗仂仍亠亟仆亳亶 仗仂仍亠仆仆亶 亠亰仍舒 $_ * $_ 81 // 丐舒从 从舒从 仗仂仍亠亟仆亳亶 亠亰仍舒 9, 仗仂仍舒亠仄 81 Math.sqrt($_) 9 // 于舒亟舒仆亶 从仂亠仆 亳亰 仗仂仍亠亟仆亠亞仂 亠亰仍舒舒, 从仂仂亶 弍仍 舒于亠仆 81 $_ 9 // 弌仆仂于舒 仗仂仍舒亠仄 9 亠亰仍舒 仗亠亟亟亠亞仂 于亳仍亠仆亳 亳从舒 从仂仆仂仍亳 亳 仗舒仄亳 clear()