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.
I am using Visual Studio 2019 v16.8.5 and have a single Blazor WASM PWA project in my solution that I recently upgraded to .NET5. In between I got it to run, but lately I cannot get to start it anymore.
The screen says Loading... and that's it.
The console output (Firefox) shows the following error: Microsoft.JSInterop.JSException: Could not find any element matching selector 'app'.
At some point this was running without this issue, but even reverting the solution to an earlier state does not bring any change and I still get a blank screen.
I found a github source saying "just remove builder.RootComponents.Add<App>("app"); from Program Main". If I do this, the error disappears and I just get a blank page saying Loading... with no errors in Console output.
Additional information: I now do a full cache cleanup (cookies and website files) after running the project in Visual Studio to prevent any caching issues.
What am I doing wrong that I can't see any of my pages?
Even after explicitely calling them like https://192.168.188.31:5555/login?
Depending on the template version used to create the initial app, a slightly different HTML is used inside the index.html.
Older version could look like
<app>Loading...</app>
while newer should like
<div id="app">Loading...</div>
In case, the first is still true, the corresponding declaration should be
builder.RootComponents.Add<App>("app");
For the second the line should be
builder.RootComponents.Add<App>("#app");
The second uses the id selector #.
Usually, the index.html is seen as a "static" file and is cached by the browser. So changes, you have done in that file are not reflected immediately. The easiest way to disable the cache is to open the developer tools, go to the Network tab and disable the cache.
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.
I want to reload a plugin after update without restarting browser. I tried the mac version, it works fine, howeve, I need to change the plugin name for each version.
navigator.plugins.refresh(false);
http://www.firebreath.org/display/documentation/Deploying+and+updating+your+plugin?focusedCommentId=8585308#comment-8585308
In windows, I tried those steps and I couldn't make it work. Has anyone had any luck with this? Does anyone know what could be wrong?
"On Windows you even need to install it to a version-specific directory with a version-specific filename. Once the plugin is installed, you can try the following to reload the plugin in open browsers
<script>
var myplugin = "<object id=\"plugin\" type=\"application/x-foobar\"> </object>";
function onload(){ // Assuming this function put your plugin on the page in the first place
document.getElementById('pluginHere').innerHTML = myplugin;
}
function reload(){
document.getElementById('pluginHere').innerHTML = "";
document.getElementById('pluginHere').innerHTML = myplugin;
}
</script>
thanks alot.
This is a difficult trick that can go wrong in a lot of different ways. It's difficult for me to guess what might be going wrong specifically, particularly since you said "on windows", but you haven't specified what browser that is. All of the browsers work differently in subtle ways and IE and the others are completely different as far as this goes.
Things you could try:
use setTimeout to add a small delay between removing the plugin from the DOM and re-adding it
open about:plugins and then shift-refresh to see if it picks up the new version
Try different browsers and see what the behavior is
Use Process Monitor to monitor the queries of the registry and see when the registry keys are being accessed; use this to help plan your strategy.
Anyway, I hope some of that helps; I used to upgrade that way but it was too error prone and too prone to things changing with new browsers, so these days I just make the client restart their browser on upgrades. It saves a lot of hassle and lots of development time.
I use a signed CAB with MSI inside to load the plugin on internet explorer.
On the first time install I found that the plugin can be accessed from Javascript but events were not working.
When I looked at loaded plugins, the plugin was not loaded.
If I refreshed the page the plugin is loaded.
my solution was to add the following code from this stack overflow question
One time page refresh after first page load
This worked like a charm.
Could you please tell me why I have waiting mouse cursor in my gwt application as if page not fully loaded ? It doesn't happen on dev server. It only happens in production. Also it's happening in Chrome but doesn't in IE.
Link to my app is here.
Screenshot
I checked it again in Chrome, but for me no wait cursor is Displayed. But i think, your Google Chrome is trying to open the Google Translate Menu. For me it came quickly and the page loading stopped and the mouse was at normal position.
I prefer you try updating your chrome.
I have also checked the same in my co-workers Laptop and its working fine too.
If problem still persists, please use CCleaner Software and clear all Temporary files, Browser Cache, Recent files etc. Why because, GWT creates a lot of temporary files which may reduce your system performance. So after each cleaning, just restart the system also. I had few such resolutions recently.
I opened your link in Firefox and got the following error
ERROR: Possible problem with your *.gwt.xml module file. The compile
time user.agent value (safari) does not match the runtime user.agent
value (gecko1_8). Expect more errors
This is because, you have compiled your code for Webkit browsers only. If you have added a line as below in your gwt module xml file,
<define-property name="user.agent" values="ie6">
you may either remove it or you can add more browser support via this.