Любой способ привязки или закладки исходного файла Javascript для легкого доступа к отладчику Chrome?

Question

Я отлаживаю файл Javascript, который глубоко вложен в исходное дерево. URL-адреса, которые я должен выполнить, очень трудно запомнить, поскольку исходный JS-источник, который я хочу, загружается внутри iFrame, который был загружен API-интерфейсом надстройки.

Есть ли способ «привязать» или «закладок» ссылки на источник Javascript из отладчика Chrome, поэтому мне не нужно развернуть дерево источников каждый раз, когда я перезагружаю веб-страницу, чтобы получить снова вернуться к этому исходному файлу?

Answer 1

Существует несколько различных вариантов, но в DevTools нет специальной функции «закрепления».

1. Файлы, открытые на вкладке «Источник», сохраняются между сеансами браузера, поэтому вы можете просто сохранить их и не закрывать. Это первая очевидная вещь, которую я заметил.

2. Если вы знаете имя файла, используйте Cmd + O (Mac)/Ctrl + O (Windows/Linux), чтобы открыть окно 'Поиск по имени файла', а затем вы можете откройте файл напрямую, а не через дерево.

3. Если вы хотите отлаживать файл, сделайте то, что предложил Christiaan, и добавьте оператор debugger; в исходный код. Это автоматически откроет файл на панели «Источники» и переломит любую линию, на которую вы положили ее. Вы также можете использовать встроенные точки останова Chrome. Они будут сохраняться до тех пор, пока вы не отключите или не удалите их, и это не требует изменения какого-либо кода.

4. Использование рабочих пространств для сопоставления сетевого пути (например, сервера, работающего локально или извне) в папку в файловой системе. Вместо добавления всей папки приложения вы можете выбрать определенную вложенную папку. Затем он появится в разделе «Файловая система» на вкладке «Источники». На этом этапе вы можете легко перейти к файлу. Это тот, который я придумал сейчас, так что не полностью протестирован.

   У меня нет отличного примера этого, но ниже я сопоставил папку css.

   

В разделе Filesystem, я вижу все файлы в использовании внутри этой папки, а не весь исходного дерева.