Giters

NativeScript / ios-jsc

NativeScript for iOS using JavaScriptCore

Home Page:http://docs.nativescript.org/runtimes/ios

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

HMR - Debug - Inspector - If you make a change to the code the break point won't work anymore

vhristov5555 opened this issue · comments

commented
  1. Create ng project tns create test --ng
  2. Add ios platform
  3. Run debug with inspector in hmr mode tns debug ios --hmr --inspector
  4. Add breakpoint
  5. Break by click or do the needed action
  6. Make some change to the code (e.g. add console log)
  7. Wait the change to be applied
  8. Try to break by doing the same action as in step 5
    Actual: The breakpoint won't be hit
    Expected: The breakpoint to be hit
commented

This also happens to us 👍

commented

@adrian-niculescu Do you reproduce this issue with Chrome DevTools as well? Or only with the Inspector App?

commented

Yes, with the Chrome DevTools as well, but with Chrome DevTools it is not consistent - sometimes it works.
Just to be clear, I also made sure I have the latest packages.

commented

Using the next version of nativescript-dev-webpack I no longer reproduce the issue. Can you please try executing the following in your project (having in mind that it will overwrite your webpack.config.js and tsconfig.tns.json files):

npm install nativescript-dev-webpack@next
./node_modules/.bin/update-ns-webpack --configs
commented

It seems I spoke too fast, my check wasn't correct, so I confirm that the issue is still reproducible. I'll write again when I have more information.

commented

Hitting breakpoints after an HMR update works with Chrome DevTools on our side. If you send us a project that has issues with it, we'll be glad to investigate.

With the Safari Inspector (which is used with the --inspector flag) however, the frontend doesn't automatically update the new source code.

As a workaround, you can manually set a breakpoint in the hot update JS file. E.g. after sending an update with the following output:

Webpack build done!
Successfully transferred runtime.js on device 2E842249-AB73-4DD3-9446-67CCBD0EE46E.
Successfully transferred bundle.5341a331e860cb7bd0f0.hot-update.js on device 2E842249-AB73-4DD3-9446-67CCBD0EE46E.
Successfully transferred 5341a331e860cb7bd0f0.hot-update.json on device 2E842249-AB73-4DD3-9446-67CCBD0EE46E.
Refreshing application on device 2E842249-AB73-4DD3-9446-67CCBD0EE46E...
CONSOLE INFO file:///app/vendor.js:73988:36: HMR: Checking for updates to the bundle with hmr hash 5341a331e860cb7bd0f0.
CONSOLE INFO file:///app/vendor.js:73988:36: HMR: The following modules were updated:
CONSOLE INFO file:///app/vendor.js:73988:36: HMR:          ↻ ./app/item/item-detail.component.ts
CONSOLE INFO file:///app/vendor.js:73988:36: HMR:          ↻ ./app/app-routing.module.ts
CONSOLE INFO file:///app/vendor.js:73988:36: HMR:          ↻ ./app/app.module.ts
CONSOLE INFO file:///app/vendor.js:73988:36: HMR: Successfully applied update with hmr hash 5341a331e860cb7bd0f0. App is up to date.
CONSOLE LOG file:///app/vendor.js:50659:20: Angular is running in the development mode. Call enableProdMode() to enable the production mode.

You can open bundle.5341a331e860cb7bd0f0.hot-update.js and place a breakpoint there.