Re: Launch.json Visual Studio Code Html
Bernd Manison
To open DevTools in Visual Studio Code in Debug mode by using the DevTools UI, right-click an .html file or click the Launch Project button, as described in Opening DevTools and the DevTools browser. You can also use the Visual Studio Code UI for launching the Debugger, such as F5, to open the DevTools tabs as well, if you define a DevTools-compatible launch.json file by clicking the Generate launch.json button in the Microsoft Edge Tools Side Bar.
Right-click an .html file in Explorer > Open with Edge. This approach essentially uses a file path rather than a URL, and doesn't require you to generate a launch.json file.
You can open the Edge DevTools: Browser tab (the embedded DevTools browser) as part of a debugging session. The DevTools extension opens a new browser as an embedded browser in Visual Studio Code. This Devtools: Browser tab can be moved anywhere within the editor. You can use this tab side by side with your source code, or split the panes and have the browser preview below your code:
You can use the DevTools extension with the usual Visual Studio Code debugging UI/workflow, as follows. In this approach, to enter Debug mode, we are not using the DevTools UI; we are not right-clicking an .html file to select Open with Edge, and we are not clicking the Activity Bar > Microsoft Edge Tools > Launch Project button.
JavaScript debugging is built in to Visual Studio Code; you can debug in Chrome, Microsoft Edge, or Node.js without installing extensions. If you debug by using the Microsoft Edge option with the Visual Studio Code debugging features and UI, you can start Microsoft Edge DevTools from the JavaScript debugger. If the DevTools extension isn't installed, you're prompted to optionally install it.
The DevTools extension gives additional functionality, such as the embedded DevTools browser which has a Device Emulation toolbar, and provides additional ways to enter Debug mode in Visual Studio Code.
After the DevTools extension is installed, when you open an .html file and then click the Inspect button on the Debug toolbar, the Edge DevTools tabs open inside of Visual Studio Code:
In the above screenshot, there's a launch.json file in Explorer in the .vscode folder, and a string from that file, Launch Edge Headless and attach DevTools, at the bottom of the window, because DevTools was opened by a Visual Studio Code feature such as F5, which used the DevTools-generated launch.json file.
In the above screenshot, there's no launch.json file in Explorer in the .vscode folder, and no string such as Launch Edge Headless and attach DevTools at the bottom of the window, because DevTools was opened by right-clicking the .html file in Explorer.
For additional UI steps and screenshots, see Where the name strings appear in the UI. In most cases, the only thing you need to know about the content of the DevTools-generated launch.json file is that you need to enter your desired URL in the "url" string in several places.
Select Generate launch.json to create a launch.json in your project. This must be a longer file that's created by DevTools, as shown in The launch.json file for the DevTools extension, not a short, more generic file created by Visual Studio Code. See also Deleting or re-creating launch.json in Troubleshooting the DevTools extension.
When you choose to debug your project in Visual Studio Code, whether you use DevTools UI features or the usual Visual Studio Code UI features, it will automatically launch the browser and open the Developer Tools, showing the URL you specified in your launch.json file.
Which webpage opens is in DevTools is set by launch.json if that file exists in your workspace (your open folder). Thus you might press F5 while your own .html file is open, and yet see the default, Success page in the DevTools tabs. Options in that case are:
This afternoon, I decided that I wanted to give OpenFL a try. Kick the tires a bit. I have 15 years of experience in ActionScript and Flash, and I am also well versed in frontend web development using TypeScript/JavaScript.
also, the Type not found : ApplicationMain error in flash develop happens after you clean the project and then try to build it without restarting flash develop. another error of that type might also happen using the vs ide.
The first issue regarding a build being required before code completion works has been a known issue for a while and is specific to Lime / OpenFL projects (not a general issue with Haxe support in VSCode). This has actually finally been fixed recently and will no longer be an issue starting with the next OpenFL / Lime releases.
However, none of it is really Flixel specific technically speaking, not even the .vscode config generated by flixel-tools (which includes a launch.json):
lime test html5 / the test task actually launches a webserver for you.
Oh, and also: the picker has more purposes than just selecting the target to use for tasks. It also changes the code completion arguments. This is necessary for completion to work properly for platform-specific APIs and conditional compilation blocks like #if js.
In launch mode it will start an instance of Firefox navigated to the start page of your applicationand terminate it when you stop debugging. You can also set the reAttach option in your launch configuration to true, in this case Firefox won't be terminated at the end of your debugging session and the debugger will re-attach to it whenyou start the next debugging session - this is a lot faster than restarting Firefox every time. reAttach also works for WebExtension debugging: in this case, the WebExtension is (re-)installed as a temporary add-on.
To configure these modes you must create a file .vscode/launch.json in the root directory of yourproject. You can do so manually or let VS Code create an example configuration for you by clickingthe gear icon at the top of the Debug pane.
You may want (or need) to debug your application running on a Webserver (especially if it interactswith server-side components like Webservices). In this case replace the file property in yourlaunch configuration with a url and a webRoot property. These properties are used to mapurls to local files:
The url property may point to a file or a directory, if it points to a directory it must end witha trailing / (e.g. -app/).You may omit the webRoot property if you specify the pathMappings manually. For example, theabove configuration would be equivalent to
To use attach mode, you have to launch Firefox manually from a terminal with remote debugging enabled.Note that if you don't use Firefox Developer Edition, you must first configure Firefox to allowremote debugging. To do this, open the Developer Tools Settings and check the checkboxes labeled"Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging"(as described here).Alternatively you can set the following values in about:config:
You can tell the debugger to ignore certain files while debugging: When a file is ignored, thedebugger won't break in that file and will skip it when you're stepping through your code. This isthe same as "black boxing" scripts in the Firefox Developer Tools.
The debug adapter needs to map the URLs of javascript files (as seen by Firefox) to local file paths(as seen by VS Code). It creates a set of default path mappings from the configuration that workfor most projects. However, depending on the setup of your project, they may not work for you,resulting in breakpoints being shown in gray (and Firefox not breaking on them) even after Firefoxhas loaded the corresponding file. In this case, you will have to define them manually using thepathMappings configuration property.
The easiest way to do this is through the Path Mapping Wizard: when you try to set a breakpointduring a debug session in a file that couldn't be mapped to a URL, the debug adapter will offer toautomatically create a path mapping for you. If you click "Yes" it will analyze the URLs loaded byFirefox and try to find a path mapping that maps this file and as many other workspace files aspossible to URLs loaded by Firefox and it will add this mapping to your debug configuration.Note that this path mapping is just a guess, so you should check if it looks plausible to you.You can also call the Path Mapping Wizard from the command palette during a debug session.
You can look at the Firefox URLs and how they are mapped to paths in the Loaded Scripts Explorer,which appears at the bottom of the debug side bar of VS Code during a debug session.By choosing "Map to local file" or "Map to local directory" from the context menu of a file ora directory, you can pick the corresponding local file or directory and a path mapping willautomatically be added to your configuration.
The most common source of path mapping problems is webpack because the URLs that it generatesdepend on its configuration and different URL styles are in use. If your configuration contains awebroot property, the following mappings will be added by default in order to support most webpacksetups:
When the path argument of a mapping is set to null, the corresponding URLs are prevented frombeing mapped to local files. In the webpack mappings shown above this is used to specify thatURLs starting with webpack:///webpack or webpack:///(webpack) do not correspond to files inyour workspace (because they are dynamically generated by webpack). It could also be used for URLsthat dynamically generate their content on the server (e.g. PHP scripts) or if the content on theserver is different from the local file content. For these URLs the debugger will show the contentfetched from the server instead of the local file content.
d3342ee215