Cannot Debug In VS Code By Attaching To Chrome


Answer :

  1. You need to install Debugger for Chrome extension for this to work. Open extensions in VS Code and search for Debugger for Chrome

  2. You need to run a web server on the URL specified in the first configuration (default to http://localhost:8080). I use serve npm package that I installed globally. From my app folder I run serve -p 8080

  3. Select Launch Chrome against localhost option. It will launch the browser and you can set breakpoints in your code and the debugging should work.

Regarding the second configuration (Attach to Chrome). There's nothing special about the port. In order to attach to Chrome you need to run Chrome with remote debugging enabled on port specified in the config. For example chrome.exe --remote-debugging-port=9222. I personally never use this options. Just follow the three steps above and you should be fine.


When using the configuration url, vscode will search for a tab with the EXACT url and attach to it if found.

Use the configuration urlFilter, which can have wildcards like *, to attach the debugger to any sub route in your url.

e.g. "urlFilter": "http://localhost:4200/*"

The complete exacts steps to take:

  1. configure your launch.json file to looks something like this:

     {    "version": "0.2.0",    "configurations": [      {        "type": "chrome",        "request": "attach",        "name": "Attach to Chrome",        "port": 9222,        "urlFilter": "http://localhost:4200/*",        "webRoot": "${workspaceFolder}"      }    ]  }

  2. Close all opened chrome instances (make sure that all of them are killed using task manager in windows).

  3. Launch chrome with the following parameter: --remote-debugging-port=9222

    Make sure that the port in this parameter is the same as the one configured in 'port' property of the attache to chrome configuration in the launch.json file (like the example above)

    You can add this parameter in your chrome shortcut properties by:

    • Right click your shortcut file and select properties

    • Chain it to Target property, e.g.

      "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

  4. Navigate to your site. In this example, http://localhost:4200

  5. Run 'Start debugging' in VS Code.


I came across this question when looking for help using the "Attach to Chrome" configuration in VSCode. While the accepted answer did give me a few hints, I did have to do some more digging. Here are the steps that worked for me in case anyone else finds them useful:

  1. Install the Debugger for Chrome extension in VSCode

  2. Serve your files with a web server of your choice

  3. Launch Chrome with remote debugging enabled

  4. In this new Chrome window navigate to the url that your web server is hosting (http://localhost:8080 for example).

  5. In VSCode, add a configuration to your launch.json file that looks like this:

    "configurations": [   {     "type": "chrome",     "request": "attach",     "port": 9222,     "name": "Attach Chrome",     "url": "http://localhost:8080/",     "webRoot": "${workspaceFolder}"   } ]

  6. Press the play button in VSCode with the 'Attach to Chrome' option selected from the drop down.

The key thing needed in the configuration file is the url field. This needs to be the URL where your files are being hosted and this URL needs to be currently open in the Chrome window that you just launched with remote debugging enabled. If you enter everything else right except this field, VSCode will give you an error message that says which urls are available. Something like Cannot connect to runtime process, timeout after 10000 ms - (reason: Can't find a valid target that matches: localhost:8080/. Available pages: ["http://localhost:8080",...

For the sake of completeness, here's how you launch Chrome with remote debugging enabled (from the Debugger for Chrome README):

Windows:

  • Right click the Chrome shortcut, and select properties
  • In the "target" field, append --remote-debugging-port=9222
  • Or in a command prompt, execute <path to chrome>/chrome.exe --remote-debugging-port=9222

MacOS:

  • In a terminal, execute /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Linux:

  • In a terminal, launch google-chrome --remote-debugging-port=9222

Comments

Post a Comment

Popular posts from this blog

Converting A String To Int In Groovy

Answer : Use the toInteger() method to convert a String to an Integer , e.g. int value = "99".toInteger() An alternative, which avoids using a deprecated method (see below) is int value = "66" as Integer If you need to check whether the String can be converted before performing the conversion, use String number = "66" if (number.isInteger()) { int value = number as Integer } Deprecation Update In recent versions of Groovy one of the toInteger() methods has been deprecated. The following is taken from org.codehaus.groovy.runtime.StringGroovyMethods in Groovy 2.4.4 /** * Parse a CharSequence into an Integer * * @param self a CharSequence * @return an Integer * @since 1.8.2 */ public static Integer toInteger(CharSequence self) { return Integer.valueOf(self.toString().trim()); } /** * @deprecated Use the CharSequence version * @see #toInteger(CharSequence) */ @Deprecated public static Integer toInteger(String self) { return toInteg
Read more

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Answer : if anyone pass through here, this is shorter solution: sudo chown -R $USER $HOME/.composer it seems to me the group information is missing in your command sudo chown -R <user> /home/<user>/.composer/cache/repo/https---packagist.org Shoud be sudo chown -R <user>:<group> /home/<user>/.composer/cache/repo/https---packagist.org But to avoid other permission issues, I would rather advise: sudo chown -R <user>:<group> /home/<user>/.composer/cache (you'll need access to other folders in there) and sudo chown <user>:<group> /home/<user>/.composer To make sure your user has permissions enough on the global composer folder. Mind the missing recursion so the user don't own keys created by root. If you need to find out the group: groups <user>
Read more

Android How Can I Convert A String To A Editable

Answer : As you probably found out, Editable is an interface so you cannot call new Editable() . However an Editable is nothing more than a String with Spannables, so use SpannableStringBuilder: Editable editable = new SpannableStringBuilder("Pass a string here"); If you only want to change the Spannables, never the text itself, you can use a basic SpannableString. Use Editable.Factory.getInstance().newEditable(str) From the android documentation: Returns a new SpannedStringBuilder from the specified CharSequence. You can override this to provide a different kind of Spanned.
Read more