Как отлаживать JS-файл локально на клиентском компьютере

Question

Существует веб-сервер CGI, и этот веб-сервер подталкивает определенные файлы html + JS при просмотре URL-адреса.

Я хочу работать с некоторыми ошибками в JS-файле, который выталкивается с сервера. Обычный способ заключается в замене JS-файла непосредственно на веб-сервере и повторном просмотре URL-адреса, чтобы увидеть эффект изменения.

Есть ли способ, в котором я могу изменить JS-файл только локально (то есть на клиентском компьютере/браузере) и проверить правильность изменения исправления/кода, сделать UT и т. Д. И, наконец, нажать на веб-сервер для полного раунда тестирование?

Возможно?

Answer 1

У вас есть несколько вариантов:

1. Используйте Chrome Dev инструменты Как было отмечено выше, просто измените файл в Chrome консоли разработчика: https://developer.chrome.com/devtools/docs/javascript-debugging. Это может работать или не работать в зависимости от изменений, которые вам необходимо внести

2. Настройте сервер локально для тестирования. Вы можете установить его достаточно легко, используя http-server от npm: https://www.npmjs.com/package/http-server.

npm install http-server -g 

Затем в корневой каталог со всеми вашими HTML/JS файлы, и просто запустить

http-server 

Вы можете проверить локально, указав свой браузер http://localhost.

Answer 2

Я не уверен, что именно вы хотите отлаживать, но вы можете использовать консоль браузера для проверки ошибок.

• Chrome debugging tools
• FireFox debugging tools
• Opera Mini debugging tools

Если вы хотите перейти в более продвинутые вещи, вы можете посмотреть в GulpJs или Grunt для автоматизации задач и установить плагин как JSHint для Js отладки. Что вы можете сделать с GulpJs - смотрите файлы js для каких-либо изменений и сделайте что-то конкретное. Поэтому, если есть какая-либо ошибка, js-hint скажет вам в CLI. Пример я сделал сегодня утром из учебника ниже:

установить глотком

npm install gulp -g 

Установите JS-подсказку

npm install gulp-jshint --save-dev 

создать gulpfile.js файл и написать в нем:

var gulp = require('gulp'); 
//call JsHint plugin 
var jshint = require('gulp-jshint'); 


// JS hint task 
gulp.task('jshint', function() { 
    gulp.src('./src/scripts/*.js') 
    .pipe(jshint()) 
    .pipe(jshint.reporter('default')); 
}); 
gulp.watch('./src/scripts/*.js', function() { 
    gulp.run('jshint', 'scripts'); 
}); 
//automate tasks 
// default gulp task 
gulp.task('default', ['scripts'],function() { 
});