Skip to content

dev tools chrome

sourcemaps

Weirdly I had the planner running on my laptop. The source maps on my laptop chrome showed 'droppable.directive.ts:95' ... etc Same app on hoek chrome always showed main.js:... or sometime polyfill.js nothing else.

tldr; there is a devtools option to disable that, but first a note on sourcemaps.

ng serve

First observations is that ng server (== yarn/npm start) does not generate any files so don't look for them in the app directory. Everything is done in-memory, so if you really want to see what is happening do

ng build
# same as 
npm build
yarn build

Although that means a production build, so you still only get 

dist/
├── 3rdpartylicenses.txt
├── assets
│   ├── box.svg
│   ├── delivery-truck.svg
│   ├── Forklift_35553.png
│   ├── Forklift-Boxes_35552.png
│   ├── Forklift-Up_35551.png
│   ├── Green-Boxes_35603.png
│   ├── Green-Small.png
│   ├── Hapag-Small.png
│   ├── Hapag-Truck_35579.png
│   ├── loader.gif
│   ├── maps_22147.png
│   ├── my-spinner.gif
│   ├── Palet-Boxes_35544.png
│   ├── project_plan_22131.png
│   ├── Red-Cargo-Boxes_35543.png
│   ├── road.png
│   ├── road.svg
│   ├── tools_22686.png
│   ├── Trash-Container_35565.png
│   └── truck.ico
├── favicon.ico
├── index.html
├── main.js
├── polyfills.js
├── runtime.js
├── scripts.js
└── styles.css

E.g : no main.js.map. and dist/main.js is completely minified (1 line)

ls -lh dist/main*
-rw-r--r-- 1 kees sudo 4.9M Dec 20 22:25 main.js

Instead do this.

ng build -c development

Normally there is no npx/yarn command for that, but you can easily add it in package.js

    "builddev": "ng build -c development",

It has to be one word though 'yarn build dev' won't work. Now you will find that main.js has lot's more lines instead of a oneliner. And it ends in 

//# sourceMappingURL=main.js.map

Indeed there is a file now called dist/main.js.map that is rather unreadable but it clearly contains the translations from the former sources files inside main.js. 

ls -lh dist/main*
-rw-r--r-- 1 kees sudo  11M Dec 20 22:25 main.js
-rw-r--r-- 1 kees sudo  18M Dec 20 22:25 main.js.map

In comparison : these two files (29M) are 6 times larger then the production file (5M).

configuration files

Todo:

It seems to be angular.json or tsconfig.json bu none of my changes has much effect there.

invisible in chrome

Now the problem when you still cannot see the sources inside devtools watch for a message like this when you click on the main.js links:

This script is on the debuggers's ignore list.

You have a button to remove it directly, or push configure. You then get to devtools -> settings (gear icon) -> Ignore list.

You will note that main.js is selected here, (WHY ?) deselect it ! Also go to preferences in the left menu and double check

  • Enable javascript Source Maps (on)

Refresh a lott and recheck if you now have source maps.