Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.10.2017, 12:04
Новичок на форуме
Отправить личное сообщение для Герасим Посмотреть профиль Найти все сообщения от Герасим
 
Регистрация: 22.09.2017
Сообщений: 8

отладка html+js в Visual Studio Code. брейк-поинты
Здравствуйте!
как совсем начинающий я пишу html+js в качестве IDE использую Notepad++ (есть подсветка синтаксиса)
Так же, я экспериментирую с Node.js но как IDE использую Visual Studio Code (VSC). Из VSC я могу запустить на отладку node проект, и вопросов тут не возникает.

VSC всем хороша, а подсветка, и автодополнение кода, но как отладить, например, js скрипты в index.html файле?
Сейчас я это делаю по F12 в Chrom.
VSC Есть возможность отладки через Debuger from Chrome. Я установил этот плагин, в launch.json настроил абсолютный путь до моего файлика
"url": "http://localhost:8020/dragdrop/r000/index1.html",
Результат:
1) Chrom запустился
2) вывод в консоль работает
3) VSC показал строку с ошибкой в JS.

Но остались вопросы, наверняка связанные с инфой в launch.json :
1) не могу в VSC ставить брейк-поинты - они не ставятся
2) каждый раз писать в launch.json пути (вроде "http://localhost:8020/dragdrop/r000/index1.html") до запускаемого html затруднительно и чревато ошибками. Как автоматизировать? типа url:html_файл_выбранный_в_VSC
Такие у меня вопросы для начала.
Ответить с цитированием
  #2 (permalink)  
Старый 04.10.2017, 12:59
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 3,652

Сложно назвать Chrome DevTools (F12) нормальным отладчиком, там элементарно даже события на нужном элементе так просто не посмотреть, имхо хром слился в этом плане уже, нода только его и спасает, странно что здесь в Учебнике это до сих не исправили, вводят новичков в заблуждение.
Ответить с цитированием
  #3 (permalink)  
Старый 04.10.2017, 14:28
Новичок на форуме
Отправить личное сообщение для Герасим Посмотреть профиль Найти все сообщения от Герасим
 
Регистрация: 22.09.2017
Сообщений: 8

Сообщение от Rise Посмотреть сообщение
Сложно назвать Chrome DevTools (F12) нормальным отладчиком, там элементарно даже события на нужном элементе так просто не посмотреть, имхо хром слился в этом плане уже, нода только его и спасает, странно что здесь в Учебнике это до сих не исправили, вводят новичков в заблуждение.
Без него было бы вообще тоскливо.
Конкретизирую вопрос.
Отладчик настраивается через launch.json, и вот его содержимое:
// Используйте IntelliSense, чтобы узнать о возможных атрибутах.
    // Наведите указатель мыши, чтобы просмотреть описания существующих атрибутов.
    // Для получения дополнительной информации посетите: [url]https://go.microsoft.com/fwlink/?linkid=830387[/url]
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:8020/dragdrop/r000/index1.html",
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "Launch localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8020/dragdrop/r000/index1.html",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

начнём с установки брейк-поинтов, что надо тут прописать чтобы они в VSC проставлялись?
Ответить с цитированием
  #4 (permalink)  
Старый 04.10.2017, 15:03
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 3,652

Герасим,
тогда не тоскуй и пили дополнительные плагины
Ответить с цитированием
  #5 (permalink)  
Старый 05.10.2017, 00:38
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 3,652

Герасим,
Попробовал данный редактор, на первый взгляд довольно шустрый и дружелюбный, Microsoft порадовали, плюсую, просто в свое время пробовал подобные редакторы сперва Atom от GitHub, который был какой-то тяжелый и тормозной (тема еще была), потом Brackets от Adobe, тот тоже притормаживал еще и обновления криво ставил, не знаю как сейчас у них дела обстоят, но первое впечатление было испорчено. По теме:

Сообщение от Герасим
как отладить, например, js скрипты в index.html файле?
По умолчанию брейкпойнты разрешены в js файлах, для разрешения в любых файлах есть опция в параметрах редактора: "debug.allowBreakpointsEverywhere": true

Сообщение от Герасим
Как автоматизировать? типа url:html_файл_выбранный_в_VSC
Относительно ${workspaceRoot} есть переменная ${relativeFile} текущий открытый файл (отсюда), launch.json:
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:8020/${relativeFile}",
            "webRoot": "${workspaceRoot}"
        }
    ]
}
Ответить с цитированием
  #6 (permalink)  
Старый 09.10.2017, 14:58
Новичок на форуме
Отправить личное сообщение для Герасим Посмотреть профиль Найти все сообщения от Герасим
 
Регистрация: 22.09.2017
Сообщений: 8

Премного благодарен! Добавил Вам кармы ;-)
с относительным путём не получилось только, так как не директория используется а localhost но это не проблема.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не получается вставить код js в HTML garmoni Элементы интерфейса 3 05.09.2013 05:56
Повседневная роль JS и html function Общие вопросы Javascript 6 25.01.2012 08:41
Visual studio и js jazzz13 Общие вопросы Javascript 0 13.11.2011 12:17
Вывод кусков HTML кода с одного файла JS wlad2 Общие вопросы Javascript 16 04.01.2011 11:52
Html метки + div + JS boltayka Events/DOM/Window 1 07.09.2009 17:21