Jak ustawić punkty przerwania w wbudowanym Javascript w Google Chrome?

211

Kiedy otwieram Narzędzia programistyczne w Google Chrome, widzę wszelkiego rodzaju funkcje, takie jak Profile, Osie czasu i Audyty, ale brakuje podstawowych funkcji, takich jak możliwość ustawiania punktów przerwania zarówno w plikach js, jak i w kodzie HTML i javascript! Próbowałem użyć konsoli javascript, która sama jest wadliwa - na przykład po napotkaniu błędu JS nie mogę się z niego wydłużyć, dopóki nie odświeżę całej strony. Czy ktoś może pomóc?

javascript debugging google-chrome as
źródło
Zrezygnowałem z Chrome. Próbowałem z Firefoksem i mój punkt przerwania został trafiony w ciągu kilku sekund. Może to być możliwe z Chrome, ale z pewnością nie jest oczywiste, jak!
Oliver P

Odpowiedzi:

127

Skorzystaj z karty źródeł, w której możesz ustawić punkty przerwania w JavaScript. W drzewie katalogów pod nim (ze strzałką w górę i w dół) możesz wybrać plik, który chcesz debugować. Możesz wyjść z błędu, naciskając przycisk wznowienia po prawej stronie tej samej karty.

Rian Schmits
źródło
31
Z jakiegoś powodu widzę listę dołączonych plików js, ale nie mogę wybrać samej strony, która nie jest wyświetlana na liście. Jakieś pomysły?
ulu
67
@ulu, miałem ten sam problem. Upewnij się, że atrybut type = "text / javascript" jest ustawiony w elemencie <script>.
contactmatt,
9
z wyjątkiem tego, że w HTML5 ten atrybut nie jest już obowiązkowy. Nie zmieniam kodu źródłowego tylko w celu debugowania!
sashok_bg
10
Nie widzę nawet po dodaniu type = "text / javascript"
Nitin Kumar Mishra
3
jeśli to nie działa, a masz wbudowany kod javascript, taki jak: <script> your code </script>dodaj nazwę typu: <script> your code //# sourceURL=somename.js </script> Wyjaśniono to lepiej w odpowiedzi poniżej
KM.
209

Czy mówisz o kodzie w <script>tagach, czy w atrybutach tagów HTML, takich jak ten?

<a href="#" onclick="alert('this is inline JS');return false;">Click</a>

Tak czy inaczej, takie debuggersłowo kluczowe będzie działać:

<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>

Uwaga: Chrome nie zatrzyma się o debuggers, jeśli narzędzia programistyczne nie są otwarte.

Możesz także ustawić punkty przerwania właściwości w plikach JS i <script>znacznikach:

  1. Kliknij kartę Źródła
  2. Kliknij ikonę Show Navigator i wybierz plik
  3. Kliknij dwukrotnie numer linii na lewym marginesie. Odpowiedni wiersz zostanie dodany do panelu Punkty przerwania (4).

wprowadź opis zdjęcia tutaj

Matt Ball
źródło
4
Nie ma zakładki Skrypty. Widzę wszystkie inne karty, które są na tym obrazku, ale nie ma karty Skrypty!
as
5
Mam na myśli możliwość ustawiania punktu przerwania w znaczniku scrip w html. Próbowałem także przy użyciu debugera; słowo kluczowe, ale to nie działa. Chrome na tym nie działa, ale działa w przeglądarce Firefox. Szukam rozwiązania punktu przerwania nie opartego na słowie kluczowym debuggera, które jest niewygodne, aby umieścić w wielu miejscach kodu, a następnie trzeba je usunąć.
as
2
W menu rozwijanym pod zakładką Skrypty widzę tylko pliki JS na liście, ale nie pliki HTML zawierające znacznik <script>, który chcę debugować. Firebug na FF ma podobną listę rozwijaną, ale zawiera także listę plików HTML zawierających znaczniki <script>. Czy to błąd, czy istnieje inny sposób ustawienia punktu przerwania we wbudowanym kodzie JS?
Wolfram Arnold
8
Karta jest wywoływana Sourceszamiast Scriptsteraz.
CoderDennis,
1
Kiedy próbowałem debugować mój osadzony plik HTML, dostałem pustą stronę w moim obszarze deweloperskim. Musiałem odświeżyć patrząc na pusty plik źródłowy, aby go zapełnić.
HappyCoder86
73

Możesz także podać nazwę skryptu:

<script> ... (your code here) //# sourceURL=somename.js </script>

oczywiście zamień „somename” na jakąś nazwę;), a następnie zobaczysz go w debuggerze chrome w „Sources> top> (bez domeny)> somename.js” jako normalnym skrypcie i będziesz mógł debugować go jak inne skrypty

buildhome.eu
źródło
3
najłatwiejsza i idealna droga. ale uwaga dla innych, pamiętaj, aby usunąć go przed przekazaniem go do produkcji.
Zameer Fouzan
2
O mój boże, nie masz pojęcia, jak bardzo mi to pomogło. O mój boże, to jest genialne. Szukałem czegoś takiego od wieków.
GregRos
Użyłem tego (świetnego) pomysłu, ale nie widziałem nowego pliku w zakładce źródeł, tylko plik HTML. Następnie wykonałem kod i na końcu w konsoli, po prawej stronie dowolnej wiadomości napisanej ze skryptu, możesz zobaczyć link do kodu. Najlepsze jest to, że link pokazuje nazwę pliku, którą podałeś skryptowi (tj. // # sourceURL = somename.js).
Manuel Rivera
1
Dałbym ci 1000 pozytywnych opinii, gdybym mógł;) Bardzo przydatna sztuczka
Giulio Quaresima
43

Odśwież stronę zawierającą skrypt, gdy narzędzia programistyczne są otwarte na karcie skryptów. Spowoduje to dodanie pozycji (programu) do listy plików, która pokazuje HTML strony wraz ze skryptem. Stąd możesz dodać punkty przerwania.

Królik Gruff
źródło
To mi nie zadziałało. Zamiast tego kliknąłem ikonę błędu skryptu w prawym dolnym rogu, aby otworzyć plik programu na karcie skryptów.
sanbikinoraion
1
Dzięki! W przypadku Chrome 69 działało to nawet, gdy nie było mnie na karcie źródeł. Kluczem jest otwarcie narzędzi programistycznych podczas ładowania strony.
Sam
To byłaby zaakceptowana odpowiedź, gdyby to było moje pytanie. Dziękuję Ci.
pulchnyNation
Pracowałem w Chrome 83. W mojej env nazwa pliku jest oparta na adresie URL twojej aplikacji. Na przykład, jeśli adres URL to example.com/xxx/yyy, nazwa pliku to „yyy”.
Helix Quar
18

Inną intuicyjną prostą sztuczką do debugowania, zwłaszcza skryptu w html zwróconym przez ajax, jest tymczasowe umieszczenie konsoli.log („test”) w skrypcie.

Po uruchomieniu zdarzenia otwórz kartę konsoli w narzędziach programisty. zobaczysz link do pliku źródłowego pokazany po prawej stronie instrukcji drukowania debugowania „test”. po prostu kliknij źródło (coś jak VM4xxx) i możesz teraz ustawić punkt przerwania.

PS: poza tym możesz rozważyć użycie instrukcji „debugger”, jeśli używasz chrome, jak sugeruje @Matt Ball

rozpoznać
źródło
10

Moja sytuacja i co zrobiłem, aby to naprawić:
mam plik javascript zawarty na stronie HTML w następujący sposób:
Nazwa strony: test.html

<!DOCTYPE html>
<html>
    <head>
        <script src="scripts/common.js"></script>
        <title>Test debugging JS in Chrome</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div>
         <script type="text/javascript">
            document.write("something");
         </script>

        </div>
     </body>
</html>

Teraz wchodząc w debuger Javascript w Chrome, klikam kartę Skrypty i rozwijam listę, jak pokazano powyżej. Widzę wyraźnie skrypty / common.js, ale NIE mogłem zobaczyć bieżącej strony HTML test.html w menu rozwijanym, dlatego nie mogłem debugować wbudowanego javascript:

<script type="text/javascript">
  document.write("something");
</script>

To było kłopotliwe. Jednak po usunięciu przestarzałego typu = "text / javascript" z osadzonego skryptu:

<script>
  document.write("something");
</script>

..i odświeżyła / ponownie załadowała stronę, voila, pojawiła się na liście rozwijanej i wszystko znów było dobrze.
Mam nadzieję, że jest to pomocne dla każdego, kto ma problemy z debugowaniem wbudowanego javascript na stronie HTML.

Aditya Singh
źródło
Dobra robota! Testowane w Chrome 20.0.1132.57 na Mac 10.7.4 Zgłoszony błąd do projektu Chromium.
Mars Robertson,
Pamiętaj, że w HTML 4 i XHTML typejest wymaganym atrybutem. W HTML5 jest opcjonalny.
hotshot309
2
Nie ma to nic wspólnego z typem. Skrypt jest gromadzony przez maszynę wirtualną po wykonaniu, chyba że w tym momencie inspektor jest już otwarty. Po ponownym załadowaniu strony nie zebrał skryptu.
vsevik
Jestem moim przypadkiem, brakowało <div>uniemożliwiło mi zobaczenie kodu w debuggerze
ceztko
5

Dodanie debugger;na moim skrypcie działało dla mnie.

JEKO
źródło
4

Miałem również ten sam problem, jak debugować JavaScript, który jest wewnątrz <script>tagów. Ale potem znalazłem go w zakładce Źródła, zwanej „(indeks)”, z nawiasami. Kliknij numer linii, aby ustawić punkty przerwania.

wprowadź opis zdjęcia tutaj

To jest Chrome 71.

ocarlsen
źródło
2

Jeśli nie widzisz karty „Skrypty”, upewnij się, że uruchamiasz Chrome z odpowiednimi argumentami. Miałem ten problem, gdy uruchomiłem Chrome do debugowania JavaScript po stronie serwera z argumentem --remote-shell-port=9222. Nie mam problemu, jeśli uruchomię Chrome bez żadnych argumentów.

Upadły anioł
źródło
Czy mógłbyś opracować proszę? Mam dokładnie ten problem - w ogóle nie widzę karty skryptów. Pobrałem najnowszą wersję Chrome dla programistów.
tom redfern
2

Natknąłem się na ten problem, jednak moją funkcją wbudowaną był widok kątowy JS. Dlatego po załadowaniu nie mogłem uzyskać dostępu do wbudowanego skryptu w celu dodania debugowania, ponieważ tylko karta index.html była dostępna na karcie źródeł debugera.

Oznaczało to, że kiedy otwierałem konkretny widok za pomocą wbudowanego (nie miałem wyboru), nie był dostępny.

Jedynym sposobem, w jaki udało mi się go trafić, było wstawienie błędnej funkcji lub wywołanie wewnątrz wbudowanej funkcji JS.

Moje rozwiązanie obejmowało: 

function doMyInline(data) {
        //Throw my undefined error here. 
        $("select.Sel").debug();

        //This is the real onclick i was passing to 
        angular.element(document.getElementById(data.id)).scope().doblablabla(data.id);
    }

Oznacza to, że kiedy kliknąłem przycisk, w konsoli Chrome zostałem poproszony. 

Uncaught TypeError: undefined is not a function

Ważną rzeczą było tutaj: VM5658:6kliknięcie tego pozwoliło mi przejść przez linię i zatrzymać punkt przerwania na później.

Niezwykle skomplikowany sposób na dotarcie do niego ... Ale zadziałał i może się przydać w przypadku aplikacji jednostronicowych, które dynamicznie ładują twoje wyświetlenia.

Nie VM[n]ma znaczącej wartości, a non odpowiada identyfikatorowi skryptu. Te informacje można znaleźć tutaj: Chrome „[VM]”

Pogrindis
źródło
1

Za pomocą programu Visual Studio (2012) miałem ten sam problem i przejście do IIS Express rozwiązało problem!

W scripttagu typeatrybut nie czynnik do niego.

Z jakiegoś powodu Visual Studio Development Server nie zapewnia wszystkiego, czego Chrome potrzebuje, aby włączyć punkty przerwania.

escape-llc
źródło
1

Wiem, że nie chodzi o Firefoxpytanie Q, ale nie chciałem dodawać kopii tego pytania, aby samemu na nie odpowiedzieć.

W przeglądarce Firefox musisz dodać, debugger;aby móc robić to, co @ mat-ball sugeruje dla scripttagu.

Tak więc w kodzie dodajesz debuggerpowyżej linii, którą chcesz debugować, a następnie możesz dodawać punkty przerwania. Jeśli tylko ustawisz punkty przerwania w przeglądarce, nie zatrzyma się.

Jeśli to nie jest miejsce, aby dodać odpowiedź Firefox, biorąc pod uwagę, że pytanie dotyczy Chrome. Nie :( pomniejsz odpowiedź, po prostu daj mi znać, gdzie powinienem ją opublikować, a ja chętnie przeniesie post. :)

T04435
źródło
0

Jest to rozszerzenie powyższej odpowiedzi Riana Schmitsa . W moim przypadku kod HTML był osadzony w kodzie JavaScript i nie widziałem nic poza kodem HTML. Może debugowanie Chrome zmieniło się na przestrzeni lat, ale kliknięcie prawym przyciskiem myszy karty Źródła / Źródła pokazało mi Dodaj folder do obszaru roboczego . Byłem w stanie dodać cały mój projekt, który dał mi dostęp do wszystkich moich skryptów JavaScript. Więcej szczegółów znajdziesz w tym linku . Mam nadzieję, że to komuś pomoże.

Patrycja
źródło