Як встановити точки перерви вбудованого Javascript у Google Chrome?

211

Коли я відкриваю Інструменти для розробників в Google Chrome, я бачу всі види функцій, такі як "Профілі", "Часові рамки" та "Аудити", але основна функціональність, як можливість встановлення точок прориву як у js-файлах, так і в коді html та javascript, відсутня! Я спробував використати консоль javascript, яка сама по собі баггі - наприклад, коли вона стикається з помилкою JS, я не можу вийти з неї, якщо не оновити всю сторінку. Може хтось допоможе?

javascript debugging google-chrome

— туз
джерело

Я відмовився від Chrome. Спробував Firefox, і мій момент перелому вдарив протягом декількох секунд. З Chrome це можливо, але це точно не очевидно, як!

— Олівер П

127

На вкладці "Джерела" ви можете там встановити точки прориву в JavaScript. У дереві каталогів під ним (зі стрілкою вгору та вниз) ви можете вибрати файл, який ви хочете налагодити. Ви можете вийти з помилки, натиснувши на резюме праворуч тієї ж вкладки.

— Ріан Шмітс
джерело

31

Я чомусь бачу список включених js-файлів, але не можу вибрати саму сторінку виконання, вона не відображається у списку. Будь-які ідеї?

— улу

67

@ulu, у мене була така ж проблема. Переконайтеся, що для вашого елемента <script> встановлено атрибут type = "text / javascript".

— contactmatt

9

за винятком того, що в HTML5 цей атрибут більше не є обов'язковим. Я не змінюю вихідний код просто для налагодження!

— sashok_bg

10

Я не бачу навіть після додавання type = "text / javascript"

— Нітін Кумар Мішра,

3

якщо це не працює, і у вас є вбудований код JavaScript типу: <script> your code </script>додати ім’я типу: <script> your code //# sourceURL=somename.js </script> Це пояснюється краще у відповіді нижче

— KM.

209

Ви говорите про код у <script>тегах або в атрибутах тегів HTML, як це?

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

У будь-якому випадку, ключове слово , як це буде працювати:debugger

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

Примітка: Chrome не зупиняється на debuggers, якщо інструменти розробки не відкриті.

Ви також можете встановити точки переривання властивостей у файлах та <script>тегах JS :

Перейдіть на вкладку Джерела
Клацніть піктограму Показати навігатор і виберіть файл
Двічі клацніть номер рядка в полі зліва. Відповідний рядок додається на панель « Розривні точки» (4).

введіть тут опис зображення

— Меттовий бал
джерело

4

Немає вкладки Сценарії. Я бачу всі інші вкладки, які є на цій фотографії, але немає вкладки Сценарії!

— туз

5

Я маю на увазі можливість встановити точку розриву в тезі scrip в html. Я також спробував використовувати налагоджувач; ключове слово, але воно не працює. Chrome на цьому не перешкоджає, але працює у Firefox. Я шукаю рішення точки розриву, яке не базується на налагоджувальному ключовому слові, яке незручно розміщувати у багатьох місцях у коді, а потім потрібно видаляти.

— туз

2

У спадному меню на вкладці Сценарії я бачу лише перелічені файли JS, але не файли HTML, які містять тег <script>, який я хочу налагодити. Firebug на FF має подібне спадне меню, але також перелічує HTML-файли, що містять теги <script>. Це помилка чи є інший спосіб встановити точку розриву в вбудованому коді JS?

— Вольфрам Арнольд

8

Вкладка викликається Sourcesзамість Scriptsтепер.

— CoderDennis

1

Коли я намагався налагодити свій вбудований html-файл js, у мене з'явилася порожня сторінка у моїй області розробки. Мені довелося оновитись, дивлячись на пустий вихідний файл, щоб його заповнити.

— HappyCoder86

73

Ви також можете дати ім'я своєму сценарію:

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

звичайно замініть "somename" на якесь ім'я;), і тоді ви побачите його в хромованому налагоджувачі на "Sources> top> (без домену)> somename.js" як звичайний сценарій, і ви зможете налагоджувати його, як і інші сценарії

— buildhome.eu
джерело

3

найпростіший і ідеальний шлях. але зверніть увагу на інших, не забудьте видалити його, перш ніж підштовхувати його до виробництва.

— Замер Фузан

2

О боже, ти не маєш уявлення, наскільки це мені допомогло. О боже, це геніально. Я шукав щось подібне століттями.

— GregRos

Я використовував цю (чудову) ідею, але не міг побачити новий файл у вкладці джерел, лише файл html. Потім я виконав код і, наприкінці, в консолі, праворуч від будь-якого повідомлення, написаного зі сценарію, ви можете побачити посилання на код. Найкраще, що посилання показує ім’я файлу, яке ви дали сценарію (тобто // # sourceURL = somename.js).

— Мануель Рівера

1

Я дав би вам 1000 грошей, якщо зможу;) Дуже корисний трюк

— Джуліо Куаресіма

43

Оновіть сторінку, що містить сценарій, поки інструменти для розробників відкриті на вкладці сценаріїв. Це додасть (програму) запис до списку файлів, який показує html сторінки, включаючи сценарій. Звідси ви можете додати точки прориву.

— Груф Зайчик
джерело

Це не спрацювало для мене. Натомість я натиснув на значок помилки скрипта в правому нижньому куті, щоб відкрити програмний файл на вкладці сценаріїв.

— sanbikinoraion

1

Дякую! Використовуючи Chrome 69, це спрацювало, навіть якщо я не був на вкладці джерел. Відкриття інструментів для розробників під час завантаження сторінки, здається, є ключовим.

— Сем

Це була б прийнята відповідь, якби це було моїм питанням. Дякую.

— повнаНація

Працював у Chrome 83. У моїй програмі назва файлу заснована на URL-адресі вашого додатка. Наприклад, якщо URL-адреса є example.com/xxx/yyy, ім'я файлу буде "yyy".

— Helix Quar

18

Інший інтуїтивно зрозумілий простий трюк для налагодження, особливо скрипта всередині html, повернутого ajax, - тимчасово поставити console.log ("тест") всередині скрипту.

Після запуску події відкрийте вкладку консолі всередині інструментів розробника. ви побачите посилання на вихідний файл, що відображається в правій частині заяви про тестування налагодження "test". просто натисніть на джерело (щось на зразок VM4xxx) і тепер ви можете встановити точку розриву.

PS: окрім того, ви можете поставити заяву "налагоджувач", якщо ви використовуєте хром, як, наприклад, те, що пропонує @Matt Ball

— кен
джерело

10

Моя ситуація та що я зробив, щоб її виправити: у
мене на HTML-сторінці включений файл javascript таким чином:
Назва сторінки: 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>

Тепер, ввівши налагоджувач Javascript у Chrome, натискаю вкладку Сценарії та випадаю зі списку, як показано вище. Я чітко бачу сценарії / common.js проте я міг би НЕ бачити поточну сторінку HTML test.html в спадному вниз, тому я не міг налагодження вбудованого JavaScript:

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

Це здивувало. Однак, коли я видалив застарілий тип = "text / javascript" із вбудованого сценарію:

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

..і оновив / перезавантажив сторінку, вуаля, вона з’явилася у випадаючому списку, і все знову було добре.
Я сподіваюся, що це корисно для всіх, хто має проблеми з налагодженням вбудованого javascript на html-сторінці.

— Адітія Сінгх
джерело

Хороша робота! Тестовано в Chrome 20.0.1132.57 на Mac 10.7.4 Подана помилка проекту Chromium.

— Марс Робертсон

Майте на увазі, що в HTML 4 та XHTML type- обов'язковий атрибут. У HTML5 це необов'язково.

— hotshot309

2

Це не має нічого спільного з типом. Сценарій збирається VM після виконання, якщо інспектор вже не відкритий в цей момент. Коли ви перезавантажували сторінку, сценарій не збирав.

— vsevik

Я мій випадок, відсутність <div>завадила мені побачити код у відладчику

— ceztko

5

Додавання debugger;зверху до мого сценарію працювало на мене.

— JEKO
джерело

4

У мене була така ж проблема, як налагодити JavaScript, який знаходиться всередині <script>тегів. Але потім я знайшов це на вкладці "Джерела", що називається "(індекс)", з дужками. Клацніть номер рядка, щоб встановити точки перерви.

Це Chrome 71.

— окарлсен
джерело

2

Якщо ви не бачите вкладки "Сценарії", переконайтеся, що ви запускаєте Chrome з правильними аргументами. У мене виникла ця проблема, коли я запустив Chrome для налагодження JavaScript на сервері з аргументом --remote-shell-port=9222. У мене немає проблем, якщо я запускаю Chrome без аргументів.

— FallenAngel
джерело

Не могли б ви детальніше розглянути? У мене така проблема - явно не бачу вкладки сценаріїв. Я завантажив останню версію розробника хрому.

— tom redfern

2

Я зіткнувся з цим питанням, однак моя вбудована функція була з кутовим видом JS. Тому на завантаженні я не зміг отримати доступ до сценарію вбудованого файлу, щоб додати налагодження, оскільки на вкладці джерел відладчика був доступний лише index.html.

Це означало, що коли я відкривав конкретний вид моїм інлайнером (не мав на це іншого вибору), він не був доступний.

Одним способом, яким я зміг це вдарити, було встановити помилкову функцію або викликати всередині вбудованої функції JS.

Моє рішення включало:

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);
    }

Це означає, що коли я натиснув на свою кнопку, мені тоді було запропоновано в хромованій консолі.

Uncaught TypeError: undefined is not a function

Тут важливим було джерело цього: VM5658:6 натискання на це дозволило мені перейти через вкладений і утримувати там точку розриву для подальшого.

Надзвичайно складний спосіб її досягнення. Але він працював і може виявитися корисним для роботи з додатками для однієї сторінки, які динамічно завантажують ваші перегляди.

Значення VM[n]не має значущого значення, а значення non прирівнюється до ідентифікатора сценарію. Цю інформацію можна знайти тут: Chrome "[VM]"

— Погріндіс
джерело

1

Використовуючи Visual Studio (2012), у мене був той самий випуск та перехід на IIS Express вирішив проблему!

scriptтегаtype не враховував його.

Чомусь сервер розробки Visual Studio не забезпечує все, що потрібно Chrome, щоб увімкнути точки перерви.

— втеча-llc
джерело

1

Я знаю, що питання Q не стосується, Firefoxале я не хотів додати копію цього питання, щоб просто відповісти на нього сам.

Для Firefox вам потрібно додати, debugger;щоб мати можливість робити те, що @ matt-ball запропонував для scriptтегу.

Отже, у своєму коді ви додаєте debuggerнад рядком, який хочете налагодити, і потім можете додати точки прориву. Якщо ви просто встановите точки перерви в браузері, він не зупиниться.

Якщо це не місце, щоб додати відповідь Firefox, враховуючи, що питання стосується Chrome. Не :( мінус відповіді, просто дайте мені знати, куди я повинен її розмістити, і я з радістю пересуну публікацію. :)

— T04435
джерело

0

Це продовження відповіді Ріана Шмітса вище. У моєму випадку у мене був вбудований HTML-код, і я не бачив нічого, крім HTML-коду. Можливо, налагодження Chrome змінилося протягом багатьох років, але клацанням правою кнопкою миші на вкладці "Джерела / джерела" було представлено мені " Додати папку в робочу область" . Я зміг додати весь свій проект, який дав мені доступ до всіх моїх JavaScripts. Більш детально ви можете ознайомитися за цим посиланням . Я сподіваюся, що це комусь допоможе.

— Патрісія
джерело