microsoft / microsoft/vscode-edge-devtools

breakpoints in client side javascript not hit in express project

Open
#901 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug tracked
Dominant language
TypeScript
Stars
827
Forks
358
Avg merge
20h 32m
Merged PRs (30d)
10

Description

Environment (please complete the following information):

  • OS (e.g., Windows 10):macOS 12.1
  • Extension version (e.g., 1.2.3): v1.4.5

Describe the bug:

I set a break point in a self invoking anonymous function and it was not hit.

Repro steps:

  1. use npx express-generator --no-view to create an express static site
  2. cd into the new project directory
  3. execute npm install
  4. launch the express server DEBUG=bug-express:* npm start
  5. Generate a launch.json file with the standard launch edge and open dev tools configuration.
  6. update configuration url entry to http://localhost:3000/
  7. While in the launch.json file add an edge launch configuration and update the url for that too.
  8. Add a script block to the projects default index.html file:
<script>
  (function () {
    console.log("not going to work")
  })()
</script>
  1. set a break point on the console.log line
  2. Using your Launch Edge configuration launch edge
  3. notice that Edge launches, and the page is displayed. Notice that the console log message appears in the console.

Expected behavior:

I expected my break point would be hit.

Additional context:

If you use npx reload -d public -p 3000 to serve the index page, the break point is also not hit.

Also, if you copy the html and launch.json file to a newly initialized node project npm init -y it also does work.

I was sure I'd seen this actually work before, so I deleted the node package.json file, but that did not help.

Finally, I have noticed that if you launch edge, then bring up the dev tools from the browser and set the break point using those tools (i.e. go into sources, find index.html, set a breakpoint) then the break point is hit and the file is opened in vs code. Oddly the file opened contains only the contents of the script tag, and the rest of the file is empty.
image

image

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue with the generated Express project, npm install, the launch.json Edge configurations, and the inline script in index.html. Compare breakpoints set in VS Code with those set in Edge DevTools, then verify that the launch configuration maps the complete index.html source and that the console.log breakpoint is hit.

Written by the indexing model from the issue text.

Assessment

Tech stack
express, javascript, node.js, typescript, vscode
Domain
developer-experience, devtools
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.