New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 617450 link

Starred by 1 user

Issue metadata

Status: Fixed
Owner:
Last visit 29 days ago
Closed: Dec 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug



Sign in to add a comment

When using hot-reload with ng2 and jspm, removing a debugger point does not work until webstorm is restarted

Reported by born2...@gmail.com, Jun 5 2016

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36

Steps to reproduce the problem:
When using hot-reload with ng2 and jspm, removing a debugger point does not work until browser / chrome is restarted.

for reference: capaj/systemjs-hot-reloader#90 (comment)
I am aware that this is potentially a chrome bug, not ng2, but this is just a huge and important feature, hot-reload for systemjs which works GREAT for all ng2 developers, so I am hoping the ng2 team can expose this issue to the Chrome team, as they do all work for Google :)

tx

Sean.

What is the expected behavior?
if bp removed, remove from chrome dev

What went wrong?
keeps stopping at place of old bp

Did this work before? N/A 

Chrome version: 50.0.2661.102  Channel: n/a
OS Version: 10.0
Flash Version: Shockwave Flash 21.0 r0

reference: 
https://github.com/angular/angular/issues/9028
https://youtrack.jetbrains.com/issue/WEB-21917
https://github.com/capaj/systemjs-hot-reloader/issues/90#issuecomment-221508478

project that can be used to test:
https://github.com/born2net/ng2Boilerplate

jspm: https://github.com/jspm/jspm-cli
hot-reload: https://github.com/capaj/systemjs-hot-reloader
 
Labels: Te-NeedsFurtherTriage

Comment 2 by l...@chromium.org, Jun 9 2016

Cc: kozyatinskiy@chromium.org
Hi Sean, I'm not sure I understand how to repro this exactly.  The steps I tried are below.  Could you please let me know what to change?

- Open the ng2Boilerplate project in WebStorm
- Add a WebStorm breakpoint on someplace like src/public/index.html line 29 (first line of inline script tag)
- Debug using webstorm with a "npm run devserver" config
- Open in Chrome http://localhost:9089/src/public/index.html#/Login/Login
- Remove the Webstorm breakpoint

Comment 3 by born2...@gmail.com, Jun 9 2016

ok, what seems to be the issue?
an error?
let me know so I can assist

Comment 4 by l...@chromium.org, Jun 9 2016

Cc: -kozyatinskiy@chromium.org
Owner: kozyatinskiy@chromium.org
Status: Assigned (was: Unconfirmed)
Could you please check is it still a problem with latest stable and if possible in latest Chrome Canary build?

Comment 6 by born2...@gmail.com, Sep 30 2016

I am using latest release chrome and still an issue, I am not running the beta version though..

Ok, could you provide step-by-step instruction for repro? There are a lot of different steps on sample project page: https://github.com/born2net/ng2Boilerplate .
Should I use gulp or npm? Or just follow debugging guide?

Comment 8 by born2...@gmail.com, Sep 30 2016

sure I would be glad to help.
so the best thing is to follow these steps:

git clone https://github.com/born2net/ng2Boilerplate.git
cd ng2Boilerplate
npm install -g jspm@beta
npm install -g gulp
npm install

and to debug run:
npm run devserver

continue by putting a breakpoint, do some saves and more saves (hot-reload will re-inject the module) and continue to remove break points.

after a minute of so you will run into a situation where you will hit a breakpoint that has been already removed.

regards

Sean.



Comment 9 by born2...@gmail.com, Sep 30 2016

by the way if you want to do a GoToMeeting I can connect to you!

Comment 10 by born2...@gmail.com, Sep 30 2016

sorry I meant TeamViewer
doesn't work for me, any ideas?

Screenshot from 2016-09-30 16:25:45.png
110 KB View Download

Comment 12 by born2...@gmail.com, Sep 30 2016

yes it seems to be case sensitive, I will soon fix it to all lower case, so if you for example rename to the case it wants as in starwars.ts it will work.
I am on Windows so its a non issue (and I believe its ok on Mac as well, Linux seems to not like the case diff which again I will fix soon)

Comment 13 by born2...@gmail.com, Sep 30 2016

ok fixed cases, please re-fork
let me know if all good now as I fixed the case issue.
regards
Thank you! I'm able to reproduce. At least DevTools doesn't update source when hotload actually updated it and breakpoints work bad.
I'll take a look.
GREAT! Glad you can see the issue.
Hot-Reload IMHO is the killer app for Angular2 and a fix for this would be greatly appreciated!!!!

let me know if you need help,

regards

Sean,
Cc: kozyatinskiy@chromium.org
Owner: lushnikov@chromium.org
Andrey, please take a look.
The problem here:
1. hot-reload send new script source with source map;
2. source map contains a lot of files.
3. files content aren't updated in sources panel;

Because we have at least two early exit in CompileScriptMapping.js in function _sourceMapLoaded:
1. if (this._scriptForSourceMap.get(sourceMap)) - yes, sure we have one, loaded on previous hot-reload;
2. if (this._sourceMapForURL.get(sourceURL)) - yes, we add this file on previous source map loaded but we still need to update its content!
Sean, could you try following steps: 
1. open the dev tools console
2. input: eval('const x = 1;\nconsole.log(x);\n//# sourceURL=somescript.js')
3. input: eval('const x = 2;\nconsole.log(x);\n//# sourceURL=somescript.js')
4. Open the somescript.js source and try to set a breakpoint 
5. input: eval('const x = 1;\nconsole.log(x);\n//# sourceURL=somescript.js')
6. Try to make something with breakpoints.
Does this issue look like issue described by you?


I tried it but not sure how to test with hot-reload!?!?
Project Member

Comment 20 by bugdroid1@chromium.org, Oct 4 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/c0d25adc44ebd36c2dc2565942a1884479c40004

commit c0d25adc44ebd36c2dc2565942a1884479c40004
Author: kozyatinskiy <kozyatinskiy@chromium.org>
Date: Tue Oct 04 00:22:56 2016

[DevTools] Fixed breakpoints in hotreloaded scripts

We need to use last arrived script for ResourceScriptFile.
Otherwise _isDiverged check will always return true in case of:
eval("source1 //# sourceURL=foo.js")
eval("source2 //# sourceURL=foo.js")

BUG= 617450 , 623150 
R=lushnikov@chromium.org

Review-Url: https://codereview.chromium.org/2384953002
Cr-Commit-Position: refs/heads/master@{#422622}

[add] https://crrev.com/c0d25adc44ebd36c2dc2565942a1884479c40004/third_party/WebKit/LayoutTests/inspector/sources/dont-diverge-script-evaluated-twice-expected.txt
[add] https://crrev.com/c0d25adc44ebd36c2dc2565942a1884479c40004/third_party/WebKit/LayoutTests/inspector/sources/dont-diverge-script-evaluated-twice.html
[modify] https://crrev.com/c0d25adc44ebd36c2dc2565942a1884479c40004/third_party/WebKit/Source/devtools/front_end/bindings/ResourceScriptMapping.js

Project Member

Comment 21 by bugdroid1@chromium.org, Oct 6 2016

Labels: merge-merged-2840
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/31c32c71acf292764248bb6716772ee9453c0fe5

commit 31c32c71acf292764248bb6716772ee9453c0fe5
Author: Alexey Kozyatinskiy <kozyatinskiy@chromium.org>
Date: Thu Oct 06 00:41:55 2016

[DevTools] Fixed breakpoints in hotreloaded scripts

We need to use last arrived script for ResourceScriptFile.
Otherwise _isDiverged check will always return true in case of:
eval("source1 //# sourceURL=foo.js")
eval("source2 //# sourceURL=foo.js")

BUG= 617450 , 623150 
R=lushnikov@chromium.org

Review-Url: https://codereview.chromium.org/2384953002
Cr-Commit-Position: refs/heads/master@{#422622}
(cherry picked from commit c0d25adc44ebd36c2dc2565942a1884479c40004)

Review URL: https://codereview.chromium.org/2397063002 .

Cr-Commit-Position: refs/branch-heads/2840@{#659}
Cr-Branched-From: 1ae106dbab4bddd85132d5b75c670794311f4c57-refs/heads/master@{#414607}

[add] https://crrev.com/31c32c71acf292764248bb6716772ee9453c0fe5/third_party/WebKit/LayoutTests/inspector/sources/dont-diverge-script-evaluated-twice-expected.txt
[add] https://crrev.com/31c32c71acf292764248bb6716772ee9453c0fe5/third_party/WebKit/LayoutTests/inspector/sources/dont-diverge-script-evaluated-twice.html
[modify] https://crrev.com/31c32c71acf292764248bb6716772ee9453c0fe5/third_party/WebKit/Source/devtools/front_end/bindings/ResourceScriptMapping.js

Project Member

Comment 22 by bugdroid1@chromium.org, Oct 27 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/31c32c71acf292764248bb6716772ee9453c0fe5

commit 31c32c71acf292764248bb6716772ee9453c0fe5
Author: Alexey Kozyatinskiy <kozyatinskiy@chromium.org>
Date: Thu Oct 06 00:41:55 2016

[DevTools] Fixed breakpoints in hotreloaded scripts

We need to use last arrived script for ResourceScriptFile.
Otherwise _isDiverged check will always return true in case of:
eval("source1 //# sourceURL=foo.js")
eval("source2 //# sourceURL=foo.js")

BUG= 617450 , 623150 
R=lushnikov@chromium.org

Review-Url: https://codereview.chromium.org/2384953002
Cr-Commit-Position: refs/heads/master@{#422622}
(cherry picked from commit c0d25adc44ebd36c2dc2565942a1884479c40004)

Review URL: https://codereview.chromium.org/2397063002 .

Cr-Commit-Position: refs/branch-heads/2840@{#659}
Cr-Branched-From: 1ae106dbab4bddd85132d5b75c670794311f4c57-refs/heads/master@{#414607}

[add] https://crrev.com/31c32c71acf292764248bb6716772ee9453c0fe5/third_party/WebKit/LayoutTests/inspector/sources/dont-diverge-script-evaluated-twice-expected.txt
[add] https://crrev.com/31c32c71acf292764248bb6716772ee9453c0fe5/third_party/WebKit/LayoutTests/inspector/sources/dont-diverge-script-evaluated-twice.html
[modify] https://crrev.com/31c32c71acf292764248bb6716772ee9453c0fe5/third_party/WebKit/Source/devtools/front_end/bindings/ResourceScriptMapping.js

Status: Fixed (was: Assigned)

Sign in to add a comment