Jak sprawdzić moduły ES6 w debuggerze chrome

Question

Przed użyciem pakietu Webpack do pakowania aplikacji tworzyłem moduły za pomocą IIFE, a następnie dołączając je do obiektu window, aby uzyskać do nich dostęp. To sprawiło, że debugowanie w przeglądarce Chrome było bardzo proste, ponieważ moduły są dostępne na całym świecie i mogłem sprawdzić je za pomocą punktów przerwania.

Niedawno przeszedłem do korzystania z pakietu Webpack, aby spakować moją aplikację, co było świetne. Jednak teraz, gdy ustawiam punkty przerwania i chcę sprawdzać importowane moduły, nie mogę tego zrobić, odwołując się do nazwy modułu. Jestem pewien, że to dlatego, że pod maską, Webpack zmienia nazwę modułów na coś innego.

Oto przykład sprawozdania przywozowych w danym pliku (btw, każdy z importowanych modułów importowania Object):

I w tym samym pliku, kiedy ustawić punkt przerwania, Chciałbym móc sprawdzić zawartość modułów, tak jak kiedyś mogłem. Na poniższym obrazku próbuję uzyskać dostęp do modułu CustomHelpers, który jest po prostu zbiorem funkcji pomocniczych przechowywanych w obiekcie.

Wszelkie myśli o tym w jaki sposób można odwołać tych importowanych modułów podczas debugowania w konsoli Chrome?

Dla wyjaśnienia, mój webpack.config.js działa i mam włączone sourcemaps, dlatego widzę oryginalny plik zamiast zniekształconych plików bundle.js. Dokładniej, próbuję po prostu sprawdzić, czy importowałem i widzę ich zawartość.

Answer 1

w webpack.config.js:

• set debug flaga true
• wskazują devtool

tak:

module.exports = { 
entry: "./index.js", //"./tryfirst/tree.js", // 
output: { 
    path: __dirname, 
    filename: "bundle.js" 
}, 
debug: true, 
devtool: 'cheap-module-eval-source-map', 
module: { 
    loaders: [ 
    ... 

Jeśli są używane do rozruchu Babel z linii poleceń, możesz ustawić te same opcje w linii poleceń, tak:

babel src -d lib --presets es2015 --sourceMaps inline; webpack --devtool eval-source-map 

Ta sama linia może zostać dodana do package.json jako skrypt. Wystarczy dodać coś takiego do sekcji „scripts”:

"scripts": { 
    ..., 
    "test": "babel src -d lib --presets es2015 --sourceMaps inline; webpack --devtool eval-source-map" 
}, 

Następnie można go uruchomić łatwo z poleceń bez konieczności pamiętać wszystkie opcje i flagi:

npm run test 

kod wewnątrz skryptów działa dokładnie (przynajmniej w większości) tak, jak piszesz na konsoli. npm run test (lub jakkolwiek nazywasz skrypt) jest skrótem, którego możesz używać od tej pory.

Jeśli nadal nie zatrzymuje się w punktach przerwania, spróbuj dodać polecenie "debugger;" w pożądanym punkcie przerwania wewnątrz twojego aktualnego kodu javascript. Wygląda zabawnie, ale zwykle robi lewę. Chrome znajdzie je dla Ciebie i ustawi w nich pułapki.