Отладка проектов JavaScript с помощью VS Code & Chrome Debugger

Там! Посмотрите на раздел Переменные . Еще до того, как начинается второй тест, мы обнаруживаем, что в массиве places уже есть данные, созданные в первом тесте. Это явно загрязнило наш текущий тест. Чтобы это исправить, нам нужно реализовать какую-то функцию setup которая сбрасывает массив places для каждого теста. Чтобы сделать это в Mocha, просто добавьте следующий код перед тестами:

 beforeEach(() => { places.length = 0; }); 

Перезапустите отладчик и дайте ему остановиться на точке останова. Теперь массив places имеет чистое состояние. Это должно позволить нашему тесту работать незагрязненным. Просто нажмите « Продолжить», чтобы выполнить остальную часть тестового кода.

Все тесты сейчас проходят. Вы должны чувствовать себя довольно здорово, так как вы научились отлаживать код без написания ни одной строки console.log . Давайте теперь посмотрим, как отлаживать клиентский код с помощью браузера.

Отладка JavaScript с помощью Chrome Debugger

Теперь, когда вы ознакомились с основами отладки JavaScript в VS Code, мы увидим, как отладить немного более сложный проект с помощью расширения Debugger for Chrome . Просто откройте панель Marketplace через панель действий. Найдите расширение и установите его.

После установки нажмите перезагрузить, чтобы активировать расширение. Давайте быстро рассмотрим код, который будем отлаживать. Веб-приложение — это в основном клиентский JavaScript-проект, который запускается с помощью сервера Express:

 const express = require('express'); const app = express(); const port = 3000; // Set public folder as root app.use(express.static('public')); // Provide access to node_modules folder app.use('/scripts', express.static(`${__dirname}/node_modules/`)); // Redirect all traffic to index.html app.use((req, res) => res.sendFile(`${__dirname}/public/index.html`)); app.listen(port, () => { console.info('listening on %d', port); }); 

Весь код на стороне клиента находится в public папке. Зависимости проекта включают в себя Semantic-UI-CSS, jQuery, Vanilla Router, Axios и Handlebars. Вот как выглядит проект, когда вы запускаете его при npm start . Вам нужно открыть URL localhost: 3000 в вашем браузере, чтобы просмотреть приложение.

Попробуйте добавить новое место. Когда вы это сделаете, вы увидите, что ничего не происходит. Очевидно, что-то идет не так, так что пришло время заглянуть под капот. Сначала мы рассмотрим код, прежде чем мы начнем сеанс отладки. Откройте public/index.html . Наше внимание в настоящее время находится в этом разделе:

 <!-- TEMPLATES --> <!-- Places Form Template --> <script id="places-form-template" type="text/x-handlebars-template"> <h1 class="ui header"> <i class="map marker alternate icon"></i> <div class="content"> Places</div> </h1> <hr> <br> <form class="ui form"> <div class="fields"> <div class="inline field"> <label>City</label> <input type="text" placeholder="Enter city" id="city" name="city"> </div> <div class="inline field"> <label>Country</label> <input type="text" placeholder="Enter Country" name="country"> </div> <div class="ui submit primary button">Add Place</div> </div> </form> <br> <div id="places-table"></div> </script> <!-- Places Table Template --> <script id="places-table-template" type="text/x-handlebars-template"> <table class="ui celled striped table"> <thead> <tr> <th>Id</th> <th>City</th> <th>Country</th> <th>NumType</th> </tr> </thead> <tbody> {{#each places}} <tr> <td>{{id}}</td> <td>{{city}}</td> <td>{{country}}</td> <td>{{numType}}</td> </tr> {{/each}} </tbody> </table> </script> 

Если вы бросите быстрый взгляд, код будет правильным. Так что проблема должна быть в app.js Откройте файл и проанализируйте код там. Ниже приведены разделы кода, на которые следует обратить внимание. Не торопитесь, чтобы прочитать комментарии, чтобы понять код.

 // Load DOM roots const el = $('#app'); const placesTable = $('#places-table'); // Initialize empty places array const places = []; // Compile Templates const placesFormTemplate = Handlebars.compile($('#places-form-template').html()); const placesTableTemplate = Handlebars.compile($('#places-table-template').html()); const addPlace = (city, country) => { const id = places.length + 1; const numType = (id % 2 === 0) ? 'even' : 'odd'; places.push({ id, city, country, numType, }); }; // Populate places array addPlace('Nairobi', 'Kenya'); ... // Places View - '/' router.add('/', () => { // Display Places Form const html = placesFormTemplate(); el.html(html); // Form Validation Rules $('.ui.form').form({ fields: { city: 'empty', country: 'empty', }, }); // Display Places Table const tableHtml = placesTableTemplate({ places }); placesTable.html(tableHtml); $('.submit').on('click', () => { const city = $('#city').val(); const country = $('#country').val(); addPlace(city, country); placesTable.html(placesTableTemplate({ places })); $('form').form('clear'); return false; }); }); 

Все вроде нормально. Но в чем может быть проблема? Давайте разместим точку останова в строке 53, где написано:

 placesTable.html(tableHtml); 

Затем создайте конфигурацию Chrome через панель отладки. Выберите выделенный вариант:

 { "type": "chrome", "request": "launch", "name": "Launch Chrome", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}/public" }, 

 const placesTable = $('#places-table'); 

 addPlace(city, country); 

 <input type="text" placeholder="Enter Country" name="country" id="country"> 

 router.navigateTo(window.location.path);