{"action":"created","issue":{"url":"https://api.github.com/repos/vuejs/vue-loader/issues/1163","repository_url":"https://api.github.com/repos/vuejs/vue-loader","labels_url":"https://api.github.com/repos/vuejs/vue-loader/issues/1163/labels{/name}","comments_url":"https://api.github.com/repos/vuejs/vue-loader/issues/1163/comments","events_url":"https://api.github.com/repos/vuejs/vue-loader/issues/1163/events","html_url":"https://github.com/vuejs/vue-loader/issues/1163","id":296944386,"node_id":"MDU6SXNzdWUyOTY5NDQzODY=","number":1163,"title":"Improve SourceMap Handling","user":{"login":"auchenberg","id":173559,"node_id":"MDQ6VXNlcjE3MzU1OQ==","avatar_url":"https://avatars2.githubusercontent.com/u/173559?v=4","gravatar_id":"","url":"https://api.github.com/users/auchenberg","html_url":"https://github.com/auchenberg","followers_url":"https://api.github.com/users/auchenberg/followers","following_url":"https://api.github.com/users/auchenberg/following{/other_user}","gists_url":"https://api.github.com/users/auchenberg/gists{/gist_id}","starred_url":"https://api.github.com/users/auchenberg/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/auchenberg/subscriptions","organizations_url":"https://api.github.com/users/auchenberg/orgs","repos_url":"https://api.github.com/users/auchenberg/repos","events_url":"https://api.github.com/users/auchenberg/events{/privacy}","received_events_url":"https://api.github.com/users/auchenberg/received_events","type":"User","site_admin":false},"labels":[{"id":134164764,"node_id":"MDU6TGFiZWwxMzQxNjQ3NjQ=","url":"https://api.github.com/repos/vuejs/vue-loader/labels/improvement","name":"improvement","color":"84b6eb","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":9,"created_at":"2018-02-14T01:18:14Z","updated_at":"2018-07-10T09:37:34Z","closed_at":null,"author_association":"NONE","body":"We on the VS Code team just released a [debugging recipe for Vue.js](https://github.com/Microsoft/vscode-recipes/tree/master/vuejs-cli), to allow our Chrome debugger to debug Vue, and during this release we discovered some fundamental problems with the sourcemaps generated by vue-loader used in the webpack projects generated by vue-cli,\r\n\r\n**Observed problems**\r\n- The generated sourcemaps seems to be invalid and unreadable for tools like https://sokra.github.io/source-map-visualization/\r\n- Stepping in debuggers like Chrome DevTools and VS Code doesn't work as expected, as we experience \"sliding breakpoints\" caused by missing mappings that causes us to \"slide\" the breakpoint down to the next line we have mappings for. Causes experiences like:\r\n![chromw1](https://user-images.githubusercontent.com/173559/36183088-9a214b2c-10e1-11e8-8017-33aa1f4ff232.gif)\r\n\r\n- Mappings for simple statements seems to be missing/wrong, which causes debuggers to load the compiled source, which causes experiences like, where a breakpoint is set on line 94, but is in reality set in a different place. \r\n![chrome2](https://user-images.githubusercontent.com/173559/36183121-b6ce8b0e-10e1-11e8-879e-ba3445ea3e5d.gif)\r\n\r\n- Generated entries for sourcefiles are added to the sourcemap under the `.` path, which creates confusion, as the files under `./src` are generated outputs, and not the original authoring abstraction. This is causing problems for debuggers like VS Code that relies on mappings between the _served bundle and the original original authoring abstraction._\r\n\r\n<img width=\"772\" alt=\"screen shot 2018-02-13 at 5 19 29 pm\" src=\"https://user-images.githubusercontent.com/173559/36183233-44214c58-10e2-11e8-9c90-c0a8568d0fec.png\">\r\n\r\nIn this example the original authoring abstraction is also referenced under `/src/components/HelloWorld.vue`\r\n\r\n- Using `let` statements for variables seems to cause problems for the sourcemaps, as both VS Code and Chrome DevTools can't step over the statements, but stays on the same line when using step-over.\r\n\r\n![chrome3](https://user-images.githubusercontent.com/173559/36183455-2a157f7c-10e3-11e8-96ad-27ce60aad26b.gif)\r\n\r\n**Steps to reproduce**\r\n1. Generate webpack project by vue-cli\r\n2. Add a few new lines to line 90 in `HelloWorld.vue`, so you have logic like:\r\n```\r\nexport default {\r\n  name: 'HelloWorld',\r\n  data () {\r\n    var a = 1\r\n    var b = 2\r\n    var c = 3\r\n    var d = a+c\r\n    return {\r\n        msg: 'Welcome to Your Vue.js App' + d\r\n    }\r\n  }\r\n}\r\n````\r\n- Open up Chrome DevTools or the VS Code debugger, and try to set breakpoints in `HelloWorld.vue`\r\n\r\n**Relevant issues**\r\n- https://github.com/vuejs/vue-loader/issues/620\r\n- https://github.com/Microsoft/vscode-recipes/issues/74"},"comment":{"url":"https://api.github.com/repos/vuejs/vue-loader/issues/comments/403762708","html_url":"https://github.com/vuejs/vue-loader/issues/1163#issuecomment-403762708","issue_url":"https://api.github.com/repos/vuejs/vue-loader/issues/1163","id":403762708,"node_id":"MDEyOklzc3VlQ29tbWVudDQwMzc2MjcwOA==","user":{"login":"gkatsanos","id":1768834,"node_id":"MDQ6VXNlcjE3Njg4MzQ=","avatar_url":"https://avatars0.githubusercontent.com/u/1768834?v=4","gravatar_id":"","url":"https://api.github.com/users/gkatsanos","html_url":"https://github.com/gkatsanos","followers_url":"https://api.github.com/users/gkatsanos/followers","following_url":"https://api.github.com/users/gkatsanos/following{/other_user}","gists_url":"https://api.github.com/users/gkatsanos/gists{/gist_id}","starred_url":"https://api.github.com/users/gkatsanos/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gkatsanos/subscriptions","organizations_url":"https://api.github.com/users/gkatsanos/orgs","repos_url":"https://api.github.com/users/gkatsanos/repos","events_url":"https://api.github.com/users/gkatsanos/events{/privacy}","received_events_url":"https://api.github.com/users/gkatsanos/received_events","type":"User","site_admin":false},"created_at":"2018-07-10T09:37:34Z","updated_at":"2018-07-10T09:37:34Z","author_association":"NONE","body":"I would like to bring your attention to a related bug I raised in JETBRAINS/Webstorm which might be related to how vue-loader handles source maps. : https://youtrack.jetbrains.com/issue/WEB-33793 \r\nI also raised this in the webpack issue tracker: https://github.com/webpack/webpack/issues/7199 "}}
{"actor":{"display_login":"gkatsanos"}}