Moi personnellement j'utilise depuis des années
browsersync, configurable via js ou en ligne de commande. Avec ça on peut visualiser plusieurs navigateurs en même temps, y compris sur mobile, mais il ne fait que le rendu en temps réel, pas le pointage du code comme un inspecteur Chrome ou Firefox par exemple.
Exemple en ligne de commande :
browser-sync start --proxy 'localhost:3000' --port 9001 --reload-debounce 2000 --files 'public' 'views' --no-notify
La même commande dans le contexte d'un fichier package.json (ici on utilise yarn pour la gestion et le boot des packages, mais ça marche tout aussi bien avec npm) :
"scripts": {
"start": "yarn go",
"dev": "yarn bs | yarn go",
"bs": "browser-sync start --proxy 'localhost:3000' --port 9001 --reload-debounce 2000 --files 'public' 'views' --no-notify",
"go": "nodemon ./bin/www"
}
Maintenant la même chose, groso modo, mais via une configuration en javascript, solution que j'utilisais auparavant (c'est plus clair mais je trouve que c'est plus relou) :
'use strict'
const config = require('./config')
, opn = require('opn')
, bs = require('browser-sync').create()
opn(config.uri) // ouverture d'un onglet pour l'url de production du site
bs.init({
proxy: config.uri
, port: 9001
, open: 'external'
, reloadDebounce: 2000 // temps mini entre deux réactualisations de page
//, logLevel: 'debug' // informations essentielles seulement
//, logFileChanges: false // information sur les fichiers traités (désactivé car verbeux...)
, notify: false // notifications dans le navigateur
})
bs.watch('**/*'
, {ignored: [
'package.json'
, 'npm-debug.log'
, 'config.js'
, 'app.js'
, 'dev.js'
]}
).on('change', bs.reload)
Modifié par Olivier C (07 Mar 2020 - 16:21)