Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Request: hit breakpoints in browser dev tools #425

Closed
BrainCrumbz opened this issue Mar 15, 2016 · 9 comments
Closed

Request: hit breakpoints in browser dev tools #425

BrainCrumbz opened this issue Mar 15, 2016 · 9 comments

Comments

@BrainCrumbz
Copy link

  • I'm submitting a ...
    [ ] bug report
    [x] feature request
    [ ] question about the decisions made in the repository
  • Do you want to request a feature or report a bug?
    When serving in development mode (npm start), one can open browser on http://localhost:3000/. When setting a breakpoint, e.g. in home.ts, and reloading page, execution should pause on that line.
  • What is the current behavior?
    Breakpoint seems to be ignored. Execution proceeds beyond that. Client app runs normally, no particular errors.
  • What is the expected behavior?
    Execution should pause on breakpoint set.
  • What is the motivation / use case for changing the behavior?
    Debugging purposes.
  • Please tell us about your environment:
  • HEAD: 9736a48
  • Angular version: 2.0.0-beta.9
  • Browser: [Chrome 49.0.2623.87 m | Firefox 45.0]
@dvulanov
Copy link

+1

Breakpoints don't work in constructors or event hooks (like OnInit, AfterViewInit, etc...). For me, they do work during regular method callbacks.

If a new non-event lifecycle breakpoint is not being hit, refresh the page and it should.

(using beta 9 and Chrome dev tools)

@samvloeberghs
Copy link
Contributor

same here, using the new setup, my breakpoints are not working anymore. Perhaps something to do with the sourcemaps implementation used?

@BrainCrumbz
Copy link
Author

We definitely found some differences with sourcemap. Initially we tried with devtool: 'cheap-module-eval-source-map', that should be faster for development rebuilds. But breakpoints did not work with this.

Then we tried with (slower) devtool: 'source-map' and breakpoints are hit.

@samvloeberghs
Copy link
Contributor

@BrainCrumbz : I can also confirm this

@largeDachshund
Copy link

Just to clarify, I used cheap-module-eval-source-map. From Chrome Dev Tools, when I clicked in main.bundle.js to set a break point, I expected Chrome to open open my class (in typescript). The break point would land on the ugly javascript in main.bundle.js. But who can read this?

I followed @BrainCrumbz suggestion. I'm able to click in the javascript source and Chrome resolves the breakpoint in the respective typescript class.

Thanks, @BrainCrumbz !

@BrainCrumbz
Copy link
Author

You're welcome! Happy to be helpful @largeDachshund

@phil-lgr
Copy link

@BrainCrumbz are you able to hit breakpoints with "sourcemap" when using HMR ?
with I run with server:dev:hmr (which is npm run server:dev -- --inline --hot), hot module works but when it does the hot-reload I can't hit the same breakpoint.

Initial state after starting server:dev:hmr:

Breakpoint is set.

image

I add console.log("hot") to my code, and after the hot reload this happen:

gif

@BrainCrumbz
Copy link
Author

BrainCrumbz commented Oct 18, 2016

Sorry, we're not using this starter at the moment, and I've not checked back this issue recently. Maybe someone else more up-to-date with the project can reply.

@PatrickJS
Copy link
Owner

sorry this may sound super rule but I'm closing long standing issues and refactoring the codebase. If you run into this problem again feel free to open another issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants