Miluji podmíněné breakpointy. Opravdu! Jsou to můj oblíbený nástroj pro ladění.
Když jsem začal s vývojem webu, "ladění" pro mě znamenalo vytvoření <pre id='log'></pre> a připojení řetězců k jeho obsahu, aby fungovaly jako protokol. Jakmile se ale Firebug objevil – a když se prohlížeče začaly péct ve svých vlastních vývojářských nástrojích – bylo to jako přechod ze skateboardu na soukromý tryskáč. Body zlomu, hodinky, zásobníky hovorů, profilery, monitory síťové aktivity – to vše je užitečné a nerad bych o žádné z nich přišel.
Ale podmíněné breakpointy jsou moje oblíbené a není to ani blízko. Zde je návod, jak je používám:
Rozbití pouze za určitých podmínek
Zřejmý případ je ten, který je zdokumentován všude:vytvoření bodu přerušení, který pouze pozastaví provádění, když je konkrétní výraz vyhodnocen jako true .
Použití podmíněných zarážek tímto způsobem je hezké, když se snažím vysledovat nějaké podivné chování v části kódu, která se často spouští, ale jejíž chování je narušeno pouze v přítomnosti konkrétních kombinací dat. Normální bod přerušení by pokaždé pozastavil provádění a ladění by bylo únavné, ale podmíněný bod přerušení vám umožňuje pozastavit se pouze tehdy, když jsou přítomna správná data, takže se můžete zastavit a rozhlédnout se. Pěkné.
Ale to je obyčejné použití. Upřímně, je to asi nejméně běžný způsob, jak je používám. Víte, podmíněné zarážky jsou skalpel . Jsou snem opičáků.
Export proměnných do globálního rozsahu
Byli jste někdy v situaci, kdy jste chtěli konzolový přístup k proměnné definované lokálně ve funkci, ale z kontextu provádění mimo funkci? Tohle se mi stává pořád; Chci nechat svou aplikaci načíst a spustit až do stavu nečinnosti a poté mít možnost kontrolovat, řekněme, vlastnosti nebo metody na nějakém objektu uzamčeném v uzavření. Podmíněné body přerušení k záchraně!
Hlavním trikem je použití operátoru nízké čárky, abyste se ujistili, že přiřazení nebude vyhodnoceno jako pravdivé, protože by to způsobilo pozastavení provádění bodu přerušení. Místo toho se výraz breakpoint vyhodnotí jako false a aplikace jím prolétne a běží až do nečinnosti, a pak si můžete hodnotu v konzoli podle svého uvážení prohlédnout pouhým zadáním jejího názvu.
Poznámka: Mám ve zvyku dělat window.varName spíše než jen varName takže náhodně neupravuji proměnnou, která existuje ve vnějším rozsahu vzhledem k umístění bodu přerušení.
Protip: v prohlížeči s podporou ES2015+ rychle exportujte řadu proměnných pomocí zkrácených názvů vlastností:window.dealyBob = {var1, var2, otherVar}, false
Použití operátoru čárka tímto způsobem je klíčem k vytvoření podmíněných zarážek sing .
Přidání protokolování bez úpravy kódu
Mým nejčastějším případem použití podmíněných bodů přerušení je protokolování. Vím, že mezi profesionálními vývojáři je běžné dělat si legraci z console.log – řízený vývoj, ale schopnost instrumentovat váš kód bez přestavby nebo dokonce načítání, sledovat vše běžící v reálném čase a získat podrobný diagnostický výstup je fantastické.
Skvělé na tom je, že Dev Tools uloží přidružení bodů přerušení k danému souboru (souborům) (alespoň v prohlížeči Chrome, kde dnes pracuji nejčastěji), takže tam budou i příště načíst aplikaci v jiné relaci, aniž bych musel ukládat jakékoli změny kódu aplikace! To mi dává jakýsi runtime Aspektově orientovaný logovací systém, který žije čistě v prohlížeči. Jak je to s oddělením starostí?
Úprava dat
Řekněme, že máte chybu, kdy repro má mít načtenou konkrétní kombinaci dat, a abyste se do tohoto stavu dostali, musíte nejprve provést řadu únavných kroků. Už ne! Jako vášnivý čtenář jsem si jistý, že jste si již dříve všimli, že pokud můžete upravit vlastnosti na window Chcete-li vytvořit nové globální proměnné ve výrazu podmíněného bodu přerušení, nic vám nebrání v úpravě čehokoli jiného.
Takže pokračujte a vložte spoustu JSON do podmíněného bodu přerušení a přiřaďte jej jakýmkoli proměnným, které potřebujete. Výložník! Rozlučte se s únavným repro.
Protip: operátor čárka umožňuje řetězit více než jen dva příkazy dohromady, takže pokud máte provést celou sadu úkolů, pokračujte a řekněte:(var1 = x; var2 = y; var3 = z), console.log('overriding with', x, y, z), false
Související Protip: nezapomeňte, že můžete nastavit hodnoty pro jakýkoli globální objekt z konzoly; pokud máte obzvláště velké objekty, které chcete použít jako přepisy, nebo pokud chcete změnit data, která bude podmíněný bod přerušení používat, aniž byste museli upravovat skutečný bod přerušení, přejděte do konzole a řekněte window.bigOverrideObject = {pasteYourObjectHere} a poté ve výrazu podmíněného bodu přerušení var1 = window.bigOverrideObject, false
Vložení a testování nového kódu
Jste bystrý čtenář, pravděpodobně jste si uvědomili, že podmíněné výrazy zarážky jsou pouze kód JavaScriptu, který běží v rozsahu a kontextu, ve kterém jsou umístěny. Pokud můžete provádět přiřazení nebo zapisovat do konzoly v podmíněném bodu přerušení, proč jeden nepoužít k testování nového aplikačního kódu? Ano.
Vložte podmíněný bod přerušení kamkoli chcete a spusťte, co chcete! Existuje několik omezení – například nemůžete return z aktuální funkce přímo ve výrazu bodu přerušení – ale většinou můžete provádět jakékoli transformace nebo výpočty, které vaše aplikace potřebuje.
Zde přichází na scénu aspekt opičího záplatování:můžete kombinovat všechny tyto techniky a používat podmíněné zarážky k přepisování celých funkcí, i když jsou uvnitř uzavření. Zkontrolujte to:
Pěkně záludné, sestřičko! (varování:odkaz pro děti z 80. let)
Protip: vaše vývojářské nástroje zjevně neupravují kód nasazené aplikace, takže je to skvělý způsob, jak vyzkoušet věci ve vašem produkčním systému, aniž byste museli dělat celý cyklus sestavení/nasazení. Dejte si však pozor, abyste věci nevyladili tak, že by nakonec zničily vaše produkční data!
Závěr
Miluji podmíněné breakpointy. A teď doufám, že vy taky!
PS:Zvláštní poděkování patří mému kamarádovi a dalšímu nadšenci pro podmíněné body zlomu Brianu Sinclairovi za recenzi tohoto článku a za rozhovor, který ho inspiroval. Jeho láska k podmíněným bodům zlomu je skutečně bezpodmínečná.