This devkit is a mod and guidance for easier development of WebUI (Panels, MFD..) in Microsoft Flightsimulator 2020.
The goal is to make the process of developing UIs in MSFS as painless as possible with more stuff to come.
- Hotreload HTML/CSS/JS changes without restarting the sim or flight
- View console.log output in game
- Console input field to directly run JS commands
- Action buttons
- Basic HTML inspector
- Panel FPS counter
- [TODO] Devtool like debugging UI / see devtools-backend-refurb
- [TODO] Load content from local webserver
- ...
- ALT + T = Show/Hide Panel
- ALT + R = Reload page
- ALT + X = Run JS command
- Download the latest zip release here.
- Extract the "msfs-webui-devkit" folder to the community folder in your MSFS installation
or - Clone the repo into your community folder
⚠️ This changed with version 0.9.0. Get rid of the former initialization code and follow the instructions below
To show the debugging UI in the panel/mfd of your choice you should put this code into the corresponding HTML file of the instrument or page.
<script type="text/javascript" src="/JS/debug.js"></script>
Tip: To show the UI on all screens on all planes, put the script tag into VCockpit.html
In game, on any panel where you activated the code, it should show an opaque UI Element in the top right corner.
Press on the "R" button to refresh the HTML Content of the panel.
Press on the "C" button to clear the console log.
Press "X" to show the console output.
Important: To be able to click on it on cockpit panels you have to bind the "New UI Window Mode" key in MsFs. Then press that key and click on a glass panel. It will pop out in a window.
In the JS corresponding to the activated panel, any console.log()
output should show up in the console panel in game.
At the bottom of the debug panel is an input field. You can run JS commands here like console.log("test")
and run them by clicking the "->" button or pressing ALT+X
g_modDebugMgr.AddDebugButton("InsertTitleHere", function() {dosomething});
This will show a button in the open debug UI which executes the function when clicked.
- Sometimes seems to fail refresh of sources no matter what you do.
HTML/CSS usually always refreshes. When it fails for JS for you, a workaround would be to add a querystring to the import in the HTML file of the panel to bust the cache. Ofc I will work on ways to make this obsolete.
Pull requests and further information on the insides are welcome. For major changes, please open an issue first to discuss what you would like to change.
dga711 🤔 💻 |
Smirow 🐛 💻 |
Knighty 💻 |
kaosfere 💻 |