Przegląd zmiennych w devtools, tak jak Vue / React dev tools

pytanie zadane 17 czerwca 2022 w JavaScript przez kordix Gaduła (3,910 p.)

Cześć

Znacie może taką wtyczkę która będzie działać podobnie jak Vue / React DevTools dla Vanilla javascript?

Owszem, można logować sobie w konsoli, ale jest to mało wygodne.

Fajnie by było mieć taką wtyczkę która podobnie pokazuje wartości zmiennych jak ww. wtyczki

komentarz 17 czerwca 2022 przez ScriptyChris Mędrzec (190,190 p.)

Możesz pokazać przykład o jakie pokazywanie zmiennych Ci chodzi?

komentarz 17 czerwca 2022 przez jankustosz1 Nałogowiec (35,880 p.)

@kordix, Raczej pokazywanie wszystkich możliwych zmiennych byłoby bez sensu, bo byś nic z tego nie wyczytał. Większy sens ma uporządkowanie twoich danych np. poprzez Reduxa i użycie Redux DevTools

komentarz 17 czerwca 2022 przez kordix Gaduła (3,910 p.)

Właśnie tylko te zdefiniowane przez użytkownika zmienne w kodzie, bez natywnych javascriptu.

No właśnie chodzi mi dokładnie o to samo , tylko że w Vanilli...

komentarz 17 czerwca 2022 przez Wiciorny Ekspert (270,190 p.)

a co macie na backendzie? Jak generowany jest request i payload? bo w czystym JS jest to do odczytu w plikach przesyłanych w żądaniach

komentarz 17 czerwca 2022 przez kordix Gaduła (3,910 p.)

ok , tu nie musi być nawet żadnego backendu

niech to będzie taki skrypt

let mojazmienna = 5;
let drugazmienna = 10

Chciałbym żeby takie narzędzie pokazało tylko te zmienne z mojego kodu

komentarz 18 czerwca 2022 przez ScriptyChris Mędrzec (190,190 p.)

Jak zatrzymasz kod debuggerem na linii następnej po drugiej (albo na drugiej i wykonasz kod klawiszem F10 lub klikając w odpowiednią strzałkę), to pokaże Ci zadeklarowane obie zmienne. O ile pokazanie wszystkich zmiennych używanych na stronie pewnie było by możliwe (nawet, po przefiltrowaniu, z których skryptów/modułów je chcesz), to nie wiem skąd takie narzędzie miało by wiedzieć, o który aktualnie scope Ci chodzi?

Dla zmiennych globalnych możesz sobie skorzystać z live expressions - to też zadziała dla zmiennych lokalnych, ale dopiero, gdy zatrzymasz kod, żeby konsola ustawiła odpowiedni scope.