Debugovani javascriptu v browseru: "proti smeru callstacku"

Dobrý den, mám takový dotaz ohledně webové konzole prohlížečů, chci debuggovat určitý skript. Cílem pozornosti je například funkce console.log(něco)   nebo odeslání XMLHTTP --  chromium krásně zobrazí  při najetí myši callstack (pokud je to doprasané jqury nebo nějaký hypermoderním react frameworkem, tak to je hluboké jak WTC a spodivnými názvy ajko dispatch, async promise apod....)

O co mi jde: v  konzoli tedy vidím call stack kde bude po řad+ funkce send(), ,d(),a() a ukazuje mi to i na řádky příslušných definic funkcí.

Můžu si klidně na ty funkce nastavit breakpointy a reloadnout stránku. Ale bude mě to zdržovat, že to třeba bude krokovat na funkci send v dalších 10  jiných případech, než zajímá mě... Proto chci na to jinak jít

Je tedy možné nějak nastavit breakpoint ně konkrétní místo v programu, s tím, že se breakne ještě předtím, než se do funkce vstoupí? Proto v nadpisu je "proti směru call stacku". Například abych dosledovat vznik proměnné stringu url. Klasický debugger má step  over, into, out. Nic z toho mi nepomůže, potřebuji, aby debugger nějak sám poznal, jakou cestou došel program do daného místa (které bych si označil breakpointem, pokud by to šlo, a nebo by ho stačilo jen najít v console.log nebo Network - po najetí myší, když tam je vidět call stack.) Samozřejmě by asi bylo nutné určit nějaké meze, aby to nekrokovalo od nějakého úplného začátku nebo to přeskakovalo nějaké funkce (když mě nezajímá vnitřek jquery.js)...


Citace
var hash="blabla";
function b(param){
 return c(param)+"hash";
}

function c(t1){
 return t1.replace(/pí/g, "3.141");
}

function a (t){
 url= "/bla?q=b("ahoj"+t)+t;
 return d(url)
}
function d(x){
 request.send("/bla?q="+encodeURI(url));
 return true;
}
 a("počátek");

« Poslední změna: 17. 08. 2019, 21:14:35 od Pivotal »


Re:Debugovani javascriptu v browseru: "proti smeru callstacku"
« Odpověď #1 kdy: 18. 08. 2019, 14:13:31 »
Klikejte na jednotlivé řádky toho callstacku a v kódu uvidíte, jak program dospěl do pozastaveného místa (místo, kde je breakpoint).

Pokud máte například dokument níže a dáte breakpoint na označené místo (ve funkci b), vidíte v callstacku, že byla funkce b volána z funkce a funkce a byla volána z globálního kontextu.

V Chrome je možné i opakovat vykonání příslušného frame, tj. opakovat vykonání určité části kódu, nicméně nejde o plnohodnotné cestování v čase, hodnoty proměnných se na předchozí stav nenastaví a samozřejmě se neprovede ani undo funkcí s vedlejšími efekty (výpis na konzoli, úpravy v DOM stromu apod.). Ve Firefoxu možnost restartu frame nějak nevidím.


Kód: [Vybrat]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
        var v = '';
        function a(){
          v = 'a';
          console.log('a');
          b();
        }
        function b(){
          v = 'b';
          console.log('b'); // <-- breakpoint
          c();
        }
        function c(){
          v = 'c';
          console.log('c');
        }
        a();
    </script>
</head>
<body>
</body>
</html>

Re:Debugovani javascriptu v browseru: "proti smeru callstacku"
« Odpověď #2 kdy: 29. 08. 2019, 20:09:04 »
No nic, například u kliknutí myší se to dá podchytit tím, že si v inspektoru dám Event listeners a najdu z dané skupiny ten správný ,ale vidím jen po rozkliknutí místo definice (místo připojení listeneru) a né funkci, jakou to volá.

A o nějakých náhodně vystřelených eventech, kde netuším, proč se dějí, (přes timeouty atd), to moc odhalit nejde. Navíc ten javascriptový reaktivní guláš tam dává mlhu