none
Simultaneous Debugging in Chrome RRS feed

  • Question

  • Thanks to those who voted we have Javascript debugging in Chrome (see Uservoice & MSDN Blog), building modern web apps would be very unproductive otherwise.

    However the current implementation will not allow the chrome developer tools (opened in chrome via F12) at the same time. When F12 is pressed, visual studio disconnects from the process with the following message in the output window.

    Visual Studio does not support additional debuggers attached to a web-page when multi-client remote debugging support is enabled in Chrome. Visual Studio is disconnecting the JavaScript debugger because we detected that Chrome Dev Tools were opened for this page: chrome-devtools://devtools/bundled/inspector.html?remoteBase=https://chrome-devtools-frontend.appspot.com/serve_file/@8f51ed0e633e109109762a3deb18a50e8c138819/&can_dock=true&hasOtherClients=true&dockSide=undocked

    Why do we need this ?

    • javascript console.log() messages do not appear in VS
    • Throwing messages to the console whilst breakpointing is a very common scenario
    • Chrome's console allows complex types to be rendered in the console. Correct me if I'm wrong but I don't think this is possible in VS
    • When using bundlers like webpack it makes it difficult to find the correct line of code in the Chrome debugger, so setting rbeakpoints in chrome is painful. The source map support in VS is way easier.

    It should be now and easy fix.

    The Chromium team has recently patched Chrome to allow multi session debugging. See this release

    I have tested it locally and it works, but for some reason, despite the patch VS 2017 still drops the session upon F12 being pressed in the debugee browser. I can only assume it has something to do with the current method VS is connecting to chrome by.

    Can we get the current Visual Studio Chrome debugging mechanism patched to allow proper multisession ?

    As a workaround for others needing this functionality, & proof of replication for the Diagnostics team please see below - 

    1. Ensure you have V63+ of chrome
    2. Open a javascript based project in Visual Studio 2017
    3. Click the drop down arrow beside the RUN button on the toolbar and select browse with..
    4. In the browse with dialog. Select the add button
    5. Locate the chrome.exe on your PC via the 3 ellipses (typically in program files (x86)) 
    6. In the arguments box type --remote-debugging-port=9222 (or choose another port number you know is free on your machine)
    7. Give this entry a friendly name "Chrome - Multidebug"
    8. Click OK
    9. Set this new browser as the default
    10. Cancel the browse dialog
    11. Run the project (A new chrome window will open and you app will render)
    12. Open another browser window (eg from the start menu in windows)  (Do not start a new tab in the browser instance created by step 11)
    13. Browse to http;//localhost:9222 (or the port number you set in step 6
    14. An option should appear to select the session you want to debug. Click the one for you app
    15. The chrome developer tools now shows in the separate browser
    16. Put a breakpoint in your javascript code in VS
    17. Cause the app to execute that code (click a button or refresh the browser etc)
    18. The chrome debugger should show the same line of code to which VS has stopped at !!!! WOO HOO!!

      The next steps are extra proof of VS still dropping the connection
    19. Let the thread continue execution.
    20. Now press F12 in the browser that the app is running in. This will open the Chrome debug tools in that browser
    21. Try and cause the breakpoint to get hit again.
    22. VS will not hit the break, as it has disconnected, but the other debug session in the second browse is still connected !

     

    Friday, December 29, 2017 2:02 AM

Answers

All replies

  • Hi Ordinary Orange,

    Thanks for your workaround for this issue.

    >>Visual Studio does not support additional debuggers attached to a web-page when multi-client remote debugging support is enabled in Chrome.

    Like your feedback in this case:

    https://stackoverflow.com/questions/46322313/visual-studio-community-2017-stops-debugging-when-i-open-chrome-developer-tool/46340257#46340257

    The VS Debugging really has this limitation even if chrome developer tools add much more features.

    To help you resolve this issue, if possible, I suggest you report this issue to the product team:

    https://visualstudio.uservoice.com/forums/121579-visual-studio-ide

    If you submit it, please share the link here, I will also help you vote it. The product team would think about adding this feature if it gets enough votes.

    Thanks for sharing your workaround again.

    Best Regards,

    Jack


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Monday, January 1, 2018 2:25 AM
    Moderator
  • Done. Here is the link

    If anyone want's to see this done, please vote!

    Monday, January 1, 2018 4:19 AM
  • Vote it.

    Best Regards,

    Jack


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Monday, January 1, 2018 4:56 AM
    Moderator
  • Hi Ordinary Orange,

    As our previous discussions, we know that the VS debugger really doesn't have this feature now.

    Since you have submitted the feature to the product team, would you please mark your reply as the temporary answer? So other community members who have the same request could find the user voice easily and help you vote it. I will help you pay attentions to this request, if product team has any update, I will share it here.

    https://visualstudio.uservoice.com/forums/121579-visual-studio-ide/suggestions/32783155-allow-simultaneous-debuggers-in-chrome

    Of course, if you have any other debugger tool issue, feel free to post it.

    Thank you for your support and co-operation.

    Sincerely,

    Jack


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Tuesday, January 2, 2018 8:43 AM
    Moderator