Chrome DevTools – galvenokārt web-izstrādātājiem paredzēts rīks. Šinī rakstiņā būs pāris knifi, kurus tu nezināji...

 

<h2>Drag-and-drop elementu panelī</h2> <p>Var izvēlēties jebkuru HTML-tegu un pārvilkt to uz jebkuru vietu kodā.</p> <p style="text-align:center"><img alt="" height="342" src="https://proglib.io/wp-content/uploads/-000//1/drag-and-drop.gif" width="550" /></p> <h2>Norāde uz teko&scaron;o izvēlēto elementu konsolē</h2> <p>Izvēlies tegu elementu panelī, un ievadi konsolē $0, lai izveidotu norādi uz teko&scaron;o izvēlēto elementu.</p> <p style="text-align:center"><img alt="" height="399" src="https://proglib.io/wp-content/uploads/-000//1/reference-elements.gif" width="550" /></p> <h2>Izmantojam vērtību no konsoles pēdējās operācijas&nbsp;</h2> <p>Izmanto $_ lai izveidotu norādi uz iepriek&scaron;ējās, konsolē izpildītās, operācijas vērtības atgrie&scaron;anu&nbsp;</p> <p style="text-align:center"><img alt="" height="311" src="https://proglib.io/wp-content/uploads/-000//1/use-last-result.gif" width="550" /></p> <h2>CSS pievieno&scaron;ana un tega stāvokļa izmaiņa</h2> <p>Elementu panelī ir 2 noderīgas pogas.<br /> Pirmā atļauj pievienot jauno CSS-vērtību jebkuram selektoram, bet - viņa arī pirms tam aizpilda teko&scaron;o izvēlēto elementu</p> <p style="text-align:center"><img alt="" height="457" src="https://proglib.io/wp-content/uploads/-000//1/add-css.gif" width="550" /></p> <p>Otrā ļauj parādīt jauno stāvokli izvēlētajam elementam: ar tā palīdzību, var ieraudzīt stilus, kuri tiek izmantoti kad elements ir aktīvs, kad uz tā ir uzlikts kursors, vai kad tas ir iezīmēts.</p> <p style="text-align:center"><img alt="" height="274" src="https://proglib.io/wp-content/uploads/-000//1/element-state.png" width="550" /></p> <h2>CSS noteik&scaron;anas vietas meklē&scaron;ana</h2> <p>cmd-click (ctrl-click Windows) pēc CSS elementu panelī, Chrome DevTools parādīs vietu, kur tas ir noteikts Sources panelī.</p> <p style="text-align:center"><img alt="" height="382" src="https://proglib.io/wp-content/uploads/-000//1/find-where-css-defined.gif" width="550" /></p> <h2>Saglabāt failā izmainīto CSS</h2> <p>Uzklik&scaron;ķini uz atrediģētā CSS-faila vārda. Chrome Devtools to atvērs Sources panelī. No turienes to var saglabār ar visām izmaiņām.<br /> &Scaron;is triks nestrādās ar element.style, un jaunos selektoros, kuri tika pievienoti ar &quot;+&quot; palīdzību.</p> <p style="text-align:center"><img alt="" height="430" src="https://proglib.io/wp-content/uploads/-000//1/save-modified-css.gif" width="550" /></p> <h2>Atsevi&scaron;ķa elementa screenshot</h2> <p>Izvēlies elementu, un nospied cmd-shift-p (Ctrl-shift-p Windows) lai atvērtu komandu izvēlni. Tur izvēlies Capture node screenshot.</p> <p style="text-align:center"><img alt="" height="356" src="https://proglib.io/wp-content/uploads/-000//1/screenshot-node.gif" width="550" /></p> <h2>Elementa meklē&scaron;ana ar CSS selektoru izmanto&scaron;anu</h2> <p>Nospied cmd-f (ctrl-f Windows) lai atvērtu meklē&scaron;anas logu elementu panelī. &Scaron;eit var ievadīt jebkuru rindu, un, ja tā ir kodā, tad tā tiks iezīmēta.</p> <p style="text-align:center"><img alt="" height="308" src="https://proglib.io/wp-content/uploads/-000//1/find-elements-css-selectors.gif" width="550" /></p> <h2>Ievade konsolē ar shift-enter palīdzību</h2> <p>Lai uzrakstītu komandas, kuras sevī iekļauj uzreiz vairākas konsoles rindas, izmanto shift-enter.</p> <p style="text-align:center"><img alt="" height="301" src="https://proglib.io/wp-content/uploads/-000//1/multiple-lines-commands.gif" width="550" /></p> <h2>Konsoles attīrī&scaron;ana</h2> <p>Lai attīrītu konsoli, var izmantot Clear pogu konsoles aug&scaron;ējā kreisajā stūrī, vai arī taustiņu kombināciju ctrl-l/cmd-k.</p> <h2>Chrome DevTools patīkami sīkumi</h2> <p>Sources panel:</p> <ul> <li>cmd-o (ctrl-o Windows) parāda visus failus, kuri ir ielādēti no jūsu lapas.</li> <li>cmd-shift-o (ctrl-shift-o Windows) parāda simbolus (īpa&scaron;ības, funkcijas, klases) teko&scaron;ajā failā.</li> <li>ctrl-g &ndash; pāriet uz noteiktu rindu.</li> </ul> <p style="text-align:center"><img alt="" height="328" src="https://proglib.io/wp-content/uploads/-000//1/files-list.png" width="550" /></p> <h2>Kontroles izteiksme</h2> <p>Tā vietā, lai atkal un atkal rakstītu viena un tā pa&scaron;a mainīgā vai izteiksmes nosaukumu, kuru, atkļūdo&scaron;anas laikā, vajadzēs pārbaudīt vairākkārtīgi, pievieno to pie kontroles izteiksmes saraksta (Watch Expression).</p> <p style="text-align:center"><img alt="" height="269" src="https://proglib.io/wp-content/uploads/-000//1/watch-expressions.gif" width="550" /></p> <h2>XHR/Fetch atkļūdotājs</h2> <p>Atkļūdotājā atver XHR/Fetch Breakpoints paneli. To var saregulāt tā, lai process pabeidzas pie XHR/Fetch izsauk&scaron;anas, vai arī, lai pabeigtos tikai noteiktā laikā.</p> <p style="text-align:center"><img alt="" height="260" src="https://proglib.io/wp-content/uploads/-000//1/xhr-fetch-breakpoints.png" width="550" /></p> <h2>DOM modifikāciju atkļūdo&scaron;ana</h2> <p>Uzklik&scaron;ķini uz elementa ar peles labo pogu un ieslēdz Break on Subtree Modifications: katru reizi, kad krustosies darbu scenāriji, atkļūdotājs apstāsies automātiski, lai vari pārbaudīt, kas notiek.</p> <p style="text-align:center"><img alt="" height="303" src="https://proglib.io/wp-content/uploads/-000//1/break-subtree-modifications.png" width="550" /></p> <p><a href="https://proglib.io/p/chrome-devtools/">Avots</a></p>