You can use your browser's devtools to debug Sourcegraph extensions running on a Sourcegraph instance (including Sourcegraph.com). Most browsers ship with an advanced JavaScript debugger, so this is a great way to find the cause of bugs in your extension.
Before debugging your extension, make sure of the following things:
activationEvents
. (For example, extensions with *
are always activated. Extensions with onLanguage:python
are only activated when you view .py
files.)src extensions publish
command expects a .map
file next to your extension's .js
file (e.g., extension.js
and extension.map
). If you used the extension creator, this is already set up for you. (If you can't use sourcemaps, debugging the transpiled JavaScript code is still possible.)For quick debugging, you can use console.log
(or other console
methods). Sourcegraph extensions just consist of JavaScript code running in your browser in a Web Worker, so all of your favorite JavaScript debugging tricks work.
If debugging on a code host e.g. GitHub, the extension runs as a background script. To view your console.log
statements, go to the background page in chrome://extensions. If you are unable to see a "Background page" link under the Sourcegraph extension then you need to enable Developer mode.
Because Sourcegraph extensions just consist of JavaScript code that runs in a Web Worker in your browser, you can use your browser's JavaScript debugger to set breakpoints and step through execution.
To set breakpoints and step through execution in your Sourcegraph extension:
.ts
(e.g., my-extension.ts
).console.log
to your extension code and reload. Look in the devtools console for the log message, and then click on the filename where the log line was emitted (which is usually shown on the far right).debugger;
statement to your extension code and reload (with your browser devtools open). Execution will stop when your browser encounters that statement, and you'll be dropped into the source file.A Sourcegraph page uses an internal RPC protocol to communicate with extensions (which run in a Web Worker). This protocol consists of request-response sequences, such as "get the hover contents for $FILE
at $POSITION
" and the corresponding response with the hover message.
In rare cases, it helps to see the communication between Sourcegraph and your extension. This can help identify bugs in the Sourcegraph extension API itself.
To enable trace logging:
localStorage.debug=true;location.reload()
Trace log messages are logged via console.log
and appear in your browser's devtools console.