jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update Flipper Debugging docs

Browse Source 
Summary: Updated "Debugging" page in Flipper docs: added instructions about debugging from Visual Studio Code and Google Chrome.

Reviewed By: mweststrate

Differential Revision: D19578864

fbshipit-source-id: c88c8278feb7c90fe77bde1d883c73079f2147f9
This commit is contained in:
Anton Nikolaev
2020-01-27 07:43:37 -08:00
committed by Facebook Github Bot
parent 31df1db74f
commit 1b3ef5f68f
3 changed files with 16 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/assets/debugging-from-google-chrome.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
docs/assets/debugging-from-vscode.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

16
docs/extending/debugging.md
View File

@@ -3,12 +3,28 @@ id: debugging
title: Debugging title: Debugging
--- ---
## Built-in Developer Tools
Flipper is built on Electron which itself is built on Chromium. This means we can debug Flipper using Chrome's developer tools. Flipper will also automatically install the React devtools extension allowing you to have better insight into what is going on in your plugin. Flipper is built on Electron which itself is built on Chromium. This means we can debug Flipper using Chrome's developer tools. Flipper will also automatically install the React devtools extension allowing you to have better insight into what is going on in your plugin.
You can open the dev tools from the menu with `View` > `Toggle Developer Tools` or pressing ⌥⌘I on a Mac. You can open the dev tools from the menu with `View` > `Toggle Developer Tools` or pressing ⌥⌘I on a Mac.
In addition to helping you with the JavaScript, the JS console will also display uncaught exceptions thrown from the client plugin in response to Flipper method calls. In addition to helping you with the JavaScript, the JS console will also display uncaught exceptions thrown from the client plugin in response to Flipper method calls.
## Google Chrome Developer Tools
As an alternative to using built-in Developer Tools you can also attach to the running Flipper instance from Google Chrome Developer Tools. Sometimes this is useful, because the version of Dev Tools in Google Chrome is more recent than the embedded one, and it is possible to easily install additional extensions if required.
To attach the running Flipper instance open new tab in Google Chrome, navigate to "http://localhost:9122" and choose "Flipper" in the opened list.
![Attach From Google Chrome](/docs/assets/debugging-from-google-chrome.png)
## Visual Studio Code
If you prefer to use the same editor for both coding and debugging, you can attach to the running Flipper instance for debugging right from Visual Studio Code. To do this, start Flipper in development mode (`yarn start`), select `Debug and Run` tab in VSCode, and run task `Attach to Running Renderer`. By default this task is set as the first one,so you can just press `F5` to run it.
![Attach From Visual Studio Code](/docs/assets/debugging-from-vscode.png)
## Plugin missing ## Plugin missing
If a plugin you created is not showing up there might be two potential classes of problems: Either there is a problem on the mobile side or on the desktop side. Understanding where the problem is rooted helps debugging it. If a plugin you created is not showing up there might be two potential classes of problems: Either there is a problem on the mobile side or on the desktop side. Understanding where the problem is rooted helps debugging it.