Merge pull request #60 from puremourning/chrome

Add chrome debugger

README.md

@@ -88,6 +88,7 @@ on a best-efforts basis:
 - C# (c-sharp) using dotnet core
 - Go (requires separate installation of [Delve][])
 - Node.js (requires node <12 for installation)
+- Anything running in chrome (i.e. javascript).
 
 ## Languages known not to work
 
@@ -162,6 +163,7 @@ The debug adapters themselves have certain runtime dependencies:
 | C# (mono)        | Experimental | `--force-enable-csharp`      | vscode-mono-debug | Mono                   |
 | Go               | Experimental | `--enable-go`                | vscode-go         | Go, [Delve][]          |
 | Node.js          | Experimental | `--force-enable-node`        | vscode-node-debug2 | 6 < Node < 12, Npm    |
+| Javascript       | Experimental | `--force-enable-chrome`      | debugger-for-chrome | Chrome |
 
 For other languages, you'll need some other way to install the gadget.
 
@@ -615,9 +617,9 @@ Requires:
 * For installation, a Node.js environemt that is < node 12. I believe this is an
   incompatibility with gulp. Advice, use [nvm][] with `nvm install --lts 10; nvm
   use --lts 10; ./install_gadget.py --force-enable-node ...`
-
 * Options described here:
   https://code.visualstudio.com/docs/nodejs/nodejs-debugging
+* Example: `support/test/node/simple`
 
 ```json
 {
@@ -637,6 +639,31 @@ Requires:
 }
 ```
 
+* Chrome
+
+This uses the chrome debugger, see
+https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome.
+
+It allows you to debug scripts running inside chrome from within Vim.
+
+* `./install_gadget.py --force-enable-chrome`
+* Example: `support/test/chrome`
+
+```json
+{
+  "configurations": {
+    "launch": {
+      "adapter": "chrome",
+      "configuration": {
+        "request": "launch",
+        "url": "http://localhost:1234/",
+        "webRoot": "${workspaceRoot}/www"
+      }
+    }
+  }
+}
+```
+
 Also the mock debugger, but that isn't actually useful.
 
 ## Partially supported

install_gadget.py

@@ -225,6 +225,32 @@ GADGETS = {
       },
     },
   },
+  'debugger-for-chrome': {
+    'language': 'typescript',
+    'enabled': False,
+    'download': {
+      'url': 'https://marketplace.visualstudio.com/_apis/public/gallery/'
+             'publishers/msjsdiag/vsextensions/'
+             'debugger-for-chrome/${version}/vspackage',
+      'target': 'msjsdiag.debugger-for-chrome-4.12.0.tar.gz',
+      'format': 'tar',
+    },
+    'all': {
+      'version': '4.12.0',
+      'file_name': 'msjsdiag.debugger-for-chrome-4.12.0.vsix',
+      'checksum': ''
+    },
+    'adapters': {
+      'chrome': {
+        'name': 'debugger-for-chrome',
+        'type': 'chrome',
+        'command': [
+          'node',
+          '${gadgetDir}/debugger-for-chrome/out/src/chromeDebug.js'
+        ],
+      },
+    },
+  },
 }
 
 

python3/vimspector/code.py

@@ -73,7 +73,15 @@ class CodeView( object ):
       return False
 
     # SIC: column is 0-based, line is 1-based in vim. Why? Nobody knows.
-    self._window.cursor = ( frame[ 'line' ], frame[ 'column' ]  - 1 )
+    try:
+      self._window.cursor = ( frame[ 'line' ], frame[ 'column' ]  - 1 )
+    except vim.error:
+      self._logger.exception( "Unable to jump to %s:%s in %s, maybe the file "
+                              "doesn't exist",
+                              frame[ 'line' ],
+                              frame[ 'column' ],
+                              frame[ 'source' ][ 'path' ] )
+      return False
 
     self._signs[ 'vimspectorPC' ] = self._next_sign_id
     self._next_sign_id += 1

python3/vimspector/stack_trace.py

@@ -162,8 +162,9 @@ class StackTraceView( object ):
         self._LoadStackTrace( thread, False )
 
   def _JumpToFrame( self, frame ):
-    self._currentFrame = frame
-    return self._session.SetCurrentFrame( self._currentFrame )
+    if 'line' in frame and frame[ 'line' ]:
+      self._currentFrame = frame
+      return self._session.SetCurrentFrame( self._currentFrame )
 
   def OnStopped( self, event ):
     if 'threadId' in event:
@@ -226,10 +227,19 @@ class StackTraceView( object ):
       if 'name' not in source:
         source[ 'name' ] = os.path.basename( source[ 'path' ] )
 
-      line = utils.AppendToBuffer(
-        self._buf,
-        '  {0}: {1}@{2}:{3}'.format( frame[ 'id' ],
-                                     frame[ 'name' ],
-                                     source[ 'name' ],
-                                     frame[ 'line' ] ) )
+      if frame.get( 'presentationHint' ) == 'label':
+        # Sigh. FOr some reason, it's OK for debug adapters to completely ignore
+        # the protocol; it seems that the chrome adapter sets 'label' and
+        # doesn't set 'line'
+        line = utils.AppendToBuffer(
+          self._buf,
+          '  {0}: {1}'.format( frame[ 'id' ], frame[ 'name' ] ) )
+      else:
+        line = utils.AppendToBuffer(
+          self._buf,
+          '  {0}: {1}@{2}:{3}'.format( frame[ 'id' ],
+                                       frame[ 'name' ],
+                                       source[ 'name' ],
+                                       frame[ 'line' ] ) )
+
       self._line_to_frame[ line ] = frame

python3/vimspector/variables.py

@@ -116,6 +116,8 @@ class VariablesView( object ):
         elif not scope.get( 'expensive' ):
           # Expand any non-expensive scope unless manually collapsed
           scope[ '_expanded' ] = True
+        else:
+          scope[ '_expanded' ] = False
 
         self._scopes.append( scope )
         if scope[ '_expanded' ]:

support/test/chrome/.tern-project

@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "browser": {}
+  }
+}

support/test/chrome/.vimspector.json

@@ -0,0 +1,12 @@
+{
+  "configurations": {
+    "launch": {
+      "adapter": "chrome",
+      "configuration": {
+        "request": "launch",
+        "url": "http://localhost:1234/",
+        "webRoot": "${workspaceRoot}/www"
+      }
+    }
+  }
+}

support/test/chrome/www/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+
+    <title>Hello, world!</title>
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+
+    <!-- Optional JavaScript -->
+    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+
+    <script src="js/test.js" type="text/javascript"></script>
+  </body>
+</html>

support/test/chrome/www/js/test.js

@@ -0,0 +1,10 @@
+$( document ).ready( function() {
+  var getMessage = function() {
+    var msg = 'this is ';
+    msg += 'a test';
+    msg += ' message';
+    return msg;
+  };
+
+  alert( 'test: ' + getMessage() );
+} );