When I write HTML, I have Google Chrome open on one side and VS Code on the other. Then when I save, I go to Chrome and reload the page. However, how do I make it so that when I save my code, the page automatically reloads in Chrome?
Use a live server. One such option is the Live Server VS Code extension. You could also use the live-server NPM package or the live-server PyPI package.
There are plenty of options out there, just pick the best one for your needs.
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.
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.
Starting a couple of weeks ago....on some of our sites, but not all, when inspecting an element, the styles tab only shows the "styles box", but not the actual styles relating to css?? - Again, this is ONLY on some sites - weird
It should look like this (with styles showing on the right relating to css)
BUT......instead, on SOME of our sites, this just started a couple of weeks ago looking like this....with no css showing in the styles tab:
NOTE: it has worked for 2 years - The page looks fine and all styles are being applied to the DOM, but do NOT show up in the styles tab when inspecting element.
Any ideas??
I just had this same issue and to resolve it I went into Chrome Developer Tools -> Settings -> Scroll to the bottom and click "Restore defaults and reload" then it all magically came back!
I hadn't changed anything between it working and when it stopped so not sure why it broke but hopefully this helps you too.
I just close the tab, and reopen it, and then right click > inspect element. Don't need to restore the whole dev tools to default settings. It's a waste. Try it, it works! :)
I had to go to Chrome Developer Tools -> Settings -> Enable JavaScript source maps and then disable that checkbox. It has probably got do with sourcemaps and the fact that I'm building the scss to css.
something that worked for me: chrome:flags>Enable Developer Tools experiments>Disable. I had enabled it at some point, used it for years w/o issue, then could not see any style details as OP described. After updating, resetting devtools prefs to default, even trying incognito, this was the one thing that seemed to get it working again. There were some neat experiments, but i'd much rather be able to do my job...
I was also facing this problem, in addition to the suggestions the other users made it worked for me accessing:
Chrome Developer Tools -> CSS -> Relaoad Linked Style Sheets
Image Ilustrating the procedure
Another one for the mix - using CSS variables but one of the variables was referencing another variable that didn't exist.
Elements using that missing variable in the chain just don't show up in chromium at all (it hid all references to h2s in the case of my site).
Interestingly, it still shows the elements in Firefox's dev tool panel.
Look for errors in the CSS file, in my in my case it was on the global CSS variables, fixing the errors solved the problem.
This tool can help you find the errors:
https://jigsaw.w3.org/css-validator/
I was just having the same odd issue. I'm not 100% sure what triggered this to happen but we use build tools to build SCSS into CSS. I went into my CSS file and removed the source map reference -
/*# sourceMappingURL=myCSS.map */
And all of the sudden it started showing up again. Then I added it back and I can still see it. I am not sure if this is because a version of the map is cached now or not but this worked for me.
Even i faced this issue !!!
style.css file was causing this issue..
I just created a new css file (Ex: style1.css) and cut pasted the older css file content (all lines in style.css) to style1.css file. It works
Note: Don't forget to update link tag, which is loading css file.
I think your CSS files are not loaded properly. Just check the syntax for referencing the external stylesheets.
It should be like this
<link rel="stylesheet" type="text/css" href="mystyle.css">
If you are skipping the rel="stylesheet", browser may think it as a plain file. To confirm the loading of stylesheets go for Chrome Inspector -> Sources
Check the site resources
No need of resetting anything. Hope it helps :)
I use Dreamweaver and Breckets.
Could see that the problem occurred only when I used Dreamweaver.
Solved the problem by changing Dreamweaver's preferences
--> Code Format --> Line Break Type --> CR LF (Windows)
Sometimes it can be the server!
I just had this error on a page that appeared to be fully loaded but the style panel was completely empty.
A complete restart of Chrome (and verifying no processes) did not work.
Restarting my server (in this case a .NET Core app running locally in Visual Studio) then allowed the style panel to show.
I think there was some sort of connection leak or web socket limit - something of that nature which was confusing Chrome.
I think this may helpfull.. If it is an angular project > then simply run
ng serve --extract-css.
A simple tools question but it's driving me nuts.
I have some .jsp files on my computer that I associated with Dashcode, figuring it would be a suitable editor. But when I try to open the files, all I get is a dialog box that says, "Dashcode cannot open files of this type".
I thought there'd be an easy way to fix this but I can't find it. Nowhere in Dashcode's preferences can I find any list of valid file extensions. I poked around its resources folder for a while and couldn't find it there either.
The Dashcode menubar is visible when the error is up, so I'm guessing that this is Dashcode itself complaining that it cannot open this file rather than the OS preventing it from trying.
How exactly does this work? Is Dashcode really just hard-coded to recognize only files of certain types by their file extension? Isn't there a way to change it?
Thanks,
Frank
Dashcode uses html, javascript and css to write either dashboard widgets or web applications that will run on an http server. JSP files are for running on a Java server such as Tomcat and so Dashcode will not open them because a dashcode project is not targeted for an environment where they will be supported so there would be no point putting the file into the project.
In a similar way you cannot use PHP files as the target environment cannot guarantee to have a PHP interpreter installed.