My SAPUI5 app consumes modules via SAP CDN. In DevTools Network tab I see that the initiator of many files is a debug version (e.g., jquery-dbg.js). I checked with SAPUI5 Diagnostics tool, the debugging is disabled.
No sap-ui-debug=true flag is provided in URL as well.
I even tried to add the following code to the <script> section of the index.html but it doesn't help:
window["sap-ui-config"] = {
"productive" : true
};
How can I switch from jquery-dbg.js to the production/minified built of jQuery?
I see that the initiator of loading many files is a debug version
There is nothing wrong with that. The reason why -dbg.js files are shown is because browsers map the source code with the production code, in order to make reading and debugging easier. Behind the scene, the production code is still run.
To disable source mapping in Chrome for example, go to devtools > Settings > Uncheck "Enable Javascript source maps"
Similar issue: https://github.com/SAP/openui5/issues/1611
Check source-maps related questions to learn more.
Related
That used to work much better a couple days ago, but now, when I want to debug my CRA webapp in Chrome, I have big delays (10 - 20 seconds) when setting or hitting breakpoints. Right now I even got a message from vscode
saying that
It's taking a while to configure your breakpoints. You can speed this up by updating the 'outFiles' in your launch.json".
The thing is: I don't have out files when debugging a react application.
What do I have to set there instead? Side note: I'm using the built-in Chrome debugger support instead of the deprecated Chrome extension.
there is this github discussion about this problem, you can go check further, but a quick trick is to add this in your configuration.
{
...
"outFiles": [],
"resolveSourceMapLocations": null,
},
It turned out that including the Typescript source maps in the production build caused the long delays. These files are very large (larger than the actual code) and hence require pretty long to be loaded.
In my project I enabled source maps as part of the Babel builds. This way I can debug Typescript code in a Visual Studio Code Web view.
Can anyone explain these three debug symbols on VSCode I have found on the internet?
My vs code has the one with the play icon.
All demos online on debugging have the one in the middle. How do I get that?
Also, node js debugging is installed but I think it shows as disabled, with no option I can find to enable it.
To answer your question directly [TL;DR]: you already have it if you are using the latest version of vscode. It will take you to the same view as the one on the right
If you look at the codicon libray ref the middle one you pointed out is not present.
Visual Studio Code made changes in February 2020 ref that incorporates running and debugging to be something more harmonious:
User studies revealed that new users have difficulties finding how to run their programs in VS Code. One reason is that the existing "Debugging" functionality is not something that they relate to "Running" a program. For that reason, we are making "Run" more prominent in the UI.
The main menu Debug has become the Run menu.
The Run and Debug view has become the Run view and the corresponding Activity Bar icon now shows a large "Play" icon with a small "bug" decoration.
So in other words, there is no difference. The 'Run' and 'Debug' view is synonymous and the icon reflects those changes. As they noted, the Debug view is now called the 'Run' view, but it still offers debugging and breakpoints.
There are 2 possibilities you are running into however:
The tutorials and guides you are using are out-dated (showing an outdated version of vscode)
The tutorial or guide is using an extension that offers debugging capabilities. Extensions have some control over the icon you see
The extension is for single file debugging, according to the June 2020 ref notes, vscode recommends the following:
For debug extensions that want to improve the single file debug experience by adding a "Run" and/or "Debug" button to the editor, we recommend following these guidelines for a consistent look and feel:
Contribute Run and/or Debug commands in the package.json (see Mock Debug):
Use the command titles "Run File"/"Debug File" or "Run Python File"/"Debug Python File".
Use the $(play) icon for Run and $(debug-alt-small) for Debug.
Where their codicon library was updated in June to reflect the following:
As you can see, none of them are prefixed with verbiage like 'run', but they all represent the same functionality.
Additionally, you may see this icon as well:
This represents the panel (view) where the output of your debug will go.
I use remote debugging of devtool to debug a webpage in Android.
I have learnt that devtool first downloaded some file(filename screen capture) necessary to debug page of webview.
However, when i clicked the filter of Network tab, something strange happened.
For example, i click XHR filter with the expection of filtering only xhr request, but only to toggle other filters than XHR tab, like All, JS, CSS, Img...gif of bizarre behavior
I used remote debugging before, but didn't encounter this strange behavior.
Is this the problem about version? I can't control the version of file which is downloaded by devtool.
Is this an official problem? Please help me, thank in advance!
I am very used to Mozilla Firefox - Firebug. When I use Firebug it isn't linked with a particular window, it changes when you switch window or tab so the Firebug instance always show the active window, html, css, javascript etc...
As I am e Web Developer I need to test a lot in different browsers. In Google Chrome the Developer Tools seems to have linked to it's own tab/window. Sometimes this is very helpfull because it allows you to compare 2 different html-trees or css in multiple Developer Tools windows. However can I re-use the Chrome Developer Tools like it will behave as Firebug does. With just 1 instance which automatically switch between source when I switch tabs or windows? I have searched for some option but could find it in somewhere. Is this even possible with Chrome Developer Tools?
I'm using OSX Yosemite and currently Google Chrome Version 43.0.2357.130 (64-bit).
Any help would be much appreciated! Thanks.
This is not supported. The best thing to do would be to file a feature request in the issue tracker. I doubt this kind of functionality would be implemented.
What DevTools does is store the settings locally, so the same settings persist between all opens. Each tab you wish to debug you need to explicitly open the DevTools for; these will all share the same settings and as they are changed in one instance it will populate to the others. This keeps the context from switching on-the-fly by just changing tabs and then losing your place.
I recently started working with Bower and I love it (how could I live without it?)
But when I install say bootstrap, I have a bunch of files downloaded in bower_components, which is cool.
But when I load my html page, I receive a 404 error: http://localhost:3000/assets/bootstrap/dist/css/bootstrap.css.map was not found.
That is not the actual path I serve it from, hence the not found error is normal.
But I don't understand where does this file is required from and what is its purpose. Could you help me on that?
Thanks!
The .map files are CSS source maps distributed with bootstrap for use with certain browsers' developer tools.
If you are using the Chrome developer tools, the CSS source map files allows you to live-edit your bootstrap Less source files in the Sources panel, and view the results without having to leave DevTools or refresh the page.
You can see the reference to the CSS source map at the bottom of the bootstrap.css file:
/*# sourceMappingURL=bootstrap.css.map */
You can configure the Chrome DevTools not to use CSS map files (DevTools Settings > Turn off Enable CSS source maps) or just remove the comment from the bootstrap CSS file.
This has nothing to do with bower, it's simply the Chrome Developer Tools trying to find source maps to help with debugging.
You can open Chrome dev tools preferences and turn that option off for css maps and also javascript maps.