1# Recurring DevTools tasks 2 3There are a few things we should do on each Nightly cycle to keep our code clean and up-to-date. 4 5## Update MDN data for the Compatibility panel 6 7Follow instructions from [devtools/client/inspector/compatibility/README.md](https://searchfox.org/mozilla-central/source/devtools/client/inspector/compatibility/README.md). 8 9## Generate webidl-pure-allowlist.js and webidl-deprecated-list.js 10 11The `webidl-pure-allowlist.js` file is used by the console instant evaluation, in order to know 12if a given method does not have side effects. The file might be updated if new APIs are added, 13or if methods are tagged as pure (or untagged). 14 15The `webidl-deprecated-list.js` file will be used to avoid calling deprecated getters from devtools code. 16 171. Generating those files requires a non-artifact build. If you're mostly working with artifact builds, you might want to run `./mach bootstrap` in order to have a proper build environment. 182. Once the build is over, you should be able to follow instructions at the top of [GenerateDataFromWebIdls.py](https://searchfox.org/mozilla-central/source/devtools/shared/webconsole/GenerateDataFromWebIdls.py), which should be: 19 2.1. Run the script with `./mach python devtools/shared/webconsole/GenerateDataFromWebIdls.py` 20 21## Remove backwards compatibility code 22 23In order to accommodate connecting to older server, we sometimes need to introduce specific branches in the code. At the moment, we only support connecting to server 2 versions older than the client (e.g. if the client is 87, we support connecting to 86 and 85). 24This means that on each release there's an opportunity to cleanup backward compatibility code that was introduced for server we don't have to support anymore. If I go back to my example with the 87 client, we can remove any backward-compatibility code that was added in 85. 25 26Luckily, when adding compatibility code, we also add comments that follow a specific pattern: `@backward-compat { version XX }`, where `XX` is the version number the code is supporting. 27 28Back to our example where the current version is 87, we need to list all the comments added for 85. This can be done by doing a search with the following expression: `@backward-compat { version 85 }` (here's the searchfox equivalent: [searchfox query](https://searchfox.org/mozilla-central/search?q=%40backward-compat%5Cs*%7B%5Cs*version+85%5Cs*%7D&path=&case=false®exp=true)). 29 30Try to file a specific bug for each backward compatibility code you are removing (you can have broader bugs though, for example if you are removing a trait). Those bugs should block a META bug that will reference all the cleanups. You can check if a bug already exists in the main cleanup META bug ([Bug 1677944](https://bugzilla.mozilla.org/show_bug.cgi?id=1677944)), and if not, you can create it by visiting [this bugzilla link](https://bugzilla.mozilla.org/enter_bug.cgi?format=__default__&blocked=1677944&product=DevTools&component=General&short_desc=[META]%20Cleanup%20backward%20compatibility%20code%20added%20in%20YY&comment=YY%20is%20now%20in%20release,%20so%20we%20can%20remove%20any%20backward%20compatibility%20code%20that%20was%20added%20to%20support%20older%20servers&keywords=meta&bug_type=task) (make sure to replace `YY` with a version number that is equal to the current number minus 2; so if current release is 87, YY is 87 - 2 = 85). 31 32## Smoke test remote debugging 33 34### Setup 35 36We will run the remote debugging smoke tests twice. Once to exercise backward compatibility, and once without backward compatibility (same version). The tests to run are the same in both cases (see Tests section). 37 38You can use either desktop or mobile versions of Firefox as the server. Mobile is preferable as some codepaths are specific to Firefox mobile, but if you don't have access to an Android device, using a Desktop server is a decent alternative. 39 40- [Instructions](https://firefox-source-docs.mozilla.org/devtools-user/about_colon_debugging/index.html#connecting-to-a-remote-device) to setup remote debugging for Firefox mobile. 41- [Instructions](https://gist.github.com/juliandescottes/b0d3d83154d9ea8a84db5d32aa35d2c1) to setup remote debugging for Firefox desktop. 42 43#### Backward compatibility test 44 45- Start the current Nightly (release XX) as Client 46- Prepare Firefox (release XX -1) as the Server. Either 47 [https://play.google.com/store/apps/details?id=org.mozilla.firefox_beta](https://play.google.com/store/apps/details?id=org.mozilla.firefox_beta) (mobile beta) or 48 Desktop Beta or DevEdition 49 50#### Same version test 51 52- Start the current Nightly (release XX) as Client 53- Prepare Firefox (also for release XX) as the Server. Either 54 [https://play.google.com/store/apps/details?id=org.mozilla.fenix](https://play.google.com/store/apps/details?id=org.mozilla.fenix) (mobile nightly) 55 or Desktop Nightly 56 57### Tests 58 59#### Basic connection: 60 61- On the Client Firefox Nightly, open about:debugging 62- Connect to the Server (either via network or USB) 63- Open the corresponding Runtime Page 64 65#### Debug targets: 66 67- On the Server Firefox, open a tab to [https://mdn.github.io/sw-test/](https://mdn.github.io/sw-test/) 68- On the Client Firefox, check in the Runtime Page for the Server Firefox that you can see the new tab as well as the corresponding service worker 69- On the Client Firefox, open the Profiler by clicking the Profile Performance button and record a short profile by clicking the Start, then the Stop button. Verify that the profiler opens a new tab with the recording. 70- On the Server Firefox, close the tab you just opened 71- On the Client Firefox, check that the corresponding tab is removed 72- On the Client Firefox, unregister the service worker, check that the corresponding SW is removed from the list 73 74#### Inspect a remote target: 75 76- On the Server Firefox, open a tab to [https://juliandescottes.github.io/webcomponents-playground/debugger-example/](https://juliandescottes.github.io/webcomponents-playground/debugger-example/) 77- On the Client Firefox, click on Inspect for this tab. Check that toolbox opens. Now we will verify that the toolbox is working. 78- Open Inspector, check that no panel is blank. Check that selecting another element in the markup-view updates the computed view. 79- Open Console, check that you see the "script loaded" message. Type "1+1" in the console, check you get "2". 80- Open Debugger, check that you can see the script.js source. Open it, put a breakpoint inside the clickMe() method (line 6). On the Server Firefox, click on the button in the page, check that you hit the breakpoint. 81- Open the Network tab. If it is empty and tells you to "perform a request…", reload the page on the Server Firefox. Check that requests are displayed. 82 83#### Inspect a remote extension: 84 85- On the Server Firefox, install any extension (for instance [https://addons.mozilla.org/en-US/firefox/addon/devtools-highlighter/](https://addons.mozilla.org/en-US/firefox/addon/devtools-highlighter/)) 86- On the Client Firefox, check the extension is displayed in the Extensions category 87- Click on Inspect, check the toolbox opens. 88- Check the Inspector, Console, Debugger and Netmonitor UIs for empty panels. 89 90## Remove expired or renew telemetry probes 91 92Bugs are automatically filed for all expired probes. You can find them using [this bugzilla query](https://bugzilla.mozilla.org/buglist.cgi?quicksearch=[probe-expiry-alert]%20devtools). 93 94We should review the list of bugs and make sure each of them block the following [META bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1566383). 95 96Reviewing a probe means either to update the expiration field because we are still monitoring the data, or to remove the probe and all the related code for recording it. This discussion can happen on the bug. 97 98## Check if third-party library should be updated 99 100This is not a mandatory task to do on each cycle, but having up-to-date libraries can help us getting new features and most importantly bug fixes that will improve the user experience of DevTools users. 101 102### WasmDis and WasmParser 103 104These modules are used by the debugger to be able to parse and debug WASM sources. 105 106Follow the [upgrade documentation](https://searchfox.org/mozilla-central/source/devtools/client/shared/vendor/WASMPARSER_UPGRADING) 107 108### jsbeautify 109 110This module is used by the inspector and the webconsole to pretty print user input. 111 112Follow the [upgrade documentation](https://searchfox.org/mozilla-central/source/devtools/shared/jsbeautify/UPGRADING.md) 113 114### CodeMirror should be updated 115 116CodeMirror is used by our source editor component, which is used all over DevTools. 117 118Follow the [upgrade section in the documentation](https://searchfox.org/mozilla-central/source/devtools/client/shared/sourceeditor/README) 119 120### fluent-react 121 122This module is used in several panels to manage localization in React applications. 123 124Follow the [upgrade documentation](https://searchfox.org/mozilla-central/source/devtools/client/shared/vendor/FLUENT_REACT_UPGRADING) 125 126### reselect 127 128Follow the [upgrade documentation](https://searchfox.org/mozilla-central/source/devtools/client/shared/vendor/RESELECT_UPGRADING) 129 130### pretty-fast 131 132**TODO** 133 134## Check xpcshell debugging 135 136Check that xpcshell tests can be debugged using the `--jsdebugger` option. 137 1381. Run Firefox from `mozilla-central` using `./mach run` 1391. Open an `about:debugging` tab 1401. If you don't have a `localhost:6000` item on the left sidebar, click on `Setup` 1411. In setup, add a new `localhost:6000` item under `Network Location` 1421. From your `mozilla-central` folder, run an xpcshell test with the `--jsdebugger` option (e.g. `./mach test devtools/server/tests/xpcshell/test_front_destroy.js --jsdebugger`) 1431. In the terminal, you should see the following message: `Waiting for the debugger to connect on port 6000` 1441. Go back to the `about:debugging` tab, click on the `Connect` button next to `localhost:6000`, and click again on the `localhost:6000` item. 1451. In the new screen, under the `Processes` section, there should be a `Multiprocess Toolbox` item with an `Inspect` button next to it. Click on the button. 1461. This should open an `about:devtools-toolbox` tab, showing the test file, paused at the first breakable line. 1471. Make sure you can add breakpoints in the test and that you can step/resume 148