mirror of
https://github.com/desktop/desktop
synced 2024-08-28 20:51:16 +00:00
![Markus Olsson](/assets/img/avatar_default.png)
electron-debug and devtron haven't been updated in years. Electron-devtools main function is adding keyboard shortcuts in dev mode to open devtools and the element selector. We use neither of these
1.8 KiB
1.8 KiB
Tooling Support for GitHub Desktop
Atom
Recommended packages:
- atom-typescript - syntax highlighting and intellisense for TypeScript
- build-npm-apm - invoke all npm scripts straight from the editor by pressing F7 (requires build)
- linter - shows linter errors and warning in the editor
You can install them all at once with:
apm i atom-typescript build-npm build busy-signal linter-tslint linter linter-ui-default intentions
If atom prompts you to install any additional dependencies for these packages, be sure to say yes.
Visual Studio Code
The Desktop repository includes a list of recommended extensions:
- Select the Extension view, select Show Workspace Recommended Extensions from the dropdown menu
- Install all the extensions
Debugging
When running the app in development mode, the Chrome Dev Tools are also launched, to assist with debugging and poking at the live application.
$ yarn
$ yarn build:dev
$ yarn start
At a basic level, the logs from the running app are displayed in the Console tab, but other features include:
- React Dev Tools - enables you to inspect components and view rendering activity in real time
If you are looking to diagnose React performance issues in Desktop, this post by Ben Schwarz is a great introduction to the workflow enabled by React 16 around measuring and investigating using the Performance tab.