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

Script not loaded in iframes so breakpoints not hit #786

Open
akrantz opened this issue Mar 5, 2019 · 6 comments

Comments

Projects
None yet
3 participants
@akrantz
Copy link

commented Mar 5, 2019

Debugging Office Add-ins running in Chrome will work, meaning breakpoints will be hit, when using the Chrome browser dev tools. However, when using VSCode Debugger for Chrome, the breakpoints will not be hit. It appears that the extension does not handle scriptParsed messages for source inside of an iframe.

  • VS Code Version: 1.31.1
  • Log file (set "trace": true in launch config):

Steps to reproduce:
(Need git and Node installed.)

  1. git clone https://github.com/OfficeDev/Excel-Custom-Functions.git
  2. cd Excel-Custom-Functions
  3. npm install
  4. Open certs\ca.crt and install certificate in Current User, place in Trusted Root Certification Authorities.
    image
    image
  5. code .
  6. Terminal, Run Task, "Watch"
  7. Terminal, Run Task, "Dev Server"
  8. Close Chrome if running, then open to https://localhost:3000/taskpane.html. Verify that SSL certificate is trusted for localhost.
  9. Open Chrome browser to http://www.office.com, and sign in.
  10. Click Excel, then New blank workbook.
    image
    image
  11. Click Insert, Add-ins.
    image
    image
  12. Click arrow next to Manage My Add-ins, and choose Upload My Add-in.
    image
  13. Click Browse, open "manifest.xml" file in Excel-Custom-Functions folder, and click Upload.
  14. Click on Home, Show TaskPane.
    image
    image
  15. Click Run button. The selected cell will turn yellow.
  16. Right-click task pane in empty area near Run button.
  17. In dev tools, click on Sources.
  18. Ctrl+P and open "taskpane.ts" (This is webpack:///./src/taskpane/taskpane.ts)
  19. Set a breakpoint in run() on "await Excel.run()" line.
  20. Click the Run button in the task pane. The breakpoint will be hit. (This shows the breakpoint working in Chrome dev tools.
  21. Close Chrome dev tools.
  22. Click the Share button for the Excel document, and copy the link.
    image

image
image
22. Close the Chrome tab containing the Excel document.
23. Go to VS Code.
24. Open src/functions/functions.ts.
25. Set a breakpoint in run() method on "await Excel.run()" line.
26. Switch to Debug view.
27. Choose "Office Online (Chrome)" launch target.
28. Press F5 or green arrow to start debugging.
29. When prompted, paste the link into the edit box and press Enter.
image
30. Chrome will launch and open the Excel document.
31. The Home menu tab should be selected. Click the Show TaskPane button.
32. Click the Run button in the taskpane.
RESULT: it does not hit the breakpoint in VS Code.
EXPECTED: it should hit the breakpoint.

@akrantz

This comment has been minimized.

Copy link
Author

commented Mar 5, 2019

@akrantz

This comment has been minimized.

Copy link
Author

commented Mar 5, 2019

In Chrome dev tools Source, there is a {"baseFrameName":... source which is for the iframe. There is no scriptParsed event that appears for VSCode-chrome-debug log file.
image

@akrantz

This comment has been minimized.

Copy link
Author

commented Mar 5, 2019

@auchenberg I've created this issue for the problem that we were discussing. While developers can debug in Chrome, we would like to have them be able to use VS Code. The fact that breakpoints aren't working for debugging their task pane prevents that.

@akrantz

This comment has been minimized.

Copy link
Author

commented Mar 5, 2019

Apologies for the long repro steps, but I couldn't construct a simple repro using an iframe. It would help to have one.

@roblourens

This comment has been minimized.

Copy link
Member

commented Mar 5, 2019

Thanks for the info, you are correct that debugging in iframes is not currently supported.

@MatisseHack

This comment has been minimized.

Copy link

commented May 2, 2019

Just ran into this issue as well when trying to debug a different type of extension (Azure DevOps). Although I was able to debug it eventually by using Firefox instead, it would be great if iframes were supported with Chrome!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.