Flutter web break points change to unverified when the chrome connects - flutter

I had a Flutter project for Android and iOS and the debugging using break points and tracing the code worked fine.
When I added web platform it was Ok at first, but at some point I lost the breakpoints. All of them turn to gray circles (unverified) as soon as the chrome connects and I they don't work.

I upload my webapp to a sub-folder on the server, so the base path is not / anymore. I change the
<base href="/"> to <base href="/pwa/"> in web/index.html file for it to work on the server. And this was what caused the confusion between the debugger and chrome.
Changing it back to <base href="/"> made the break points active again.
Hope it saves someone several days and many builds and new test projects that took me to find the problem.
BTW: Please let me know if there is any option I can set in launch.json to fix it so I don't have to change that href back and forth.

Related

Visual Studio Code losing connection to Live Server

I worked on media queries on my website today and all of a sudden my browser won't refresh the site but rather says "No internet. ERR_INTERNET_DISCONNECTED.
I am using Visual Studio Code with Live Server by Ritwick Dey.
Console warning says "DevTools failed to load source map: Could not load content for chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND"
"VM10:6745 crbug/1173575, non-JS module files deprecated."
1 Issue: "Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform"
The site is on my laptop and I'm just working on it offline. What the heck is going on here?
I tried removing the queries.css file to see if that would make a difference. It did not.
Any link on the site will take me to this NO INTERNET page if I am in the responsive dimensions part of DevTools. Also when there is any edit to the html or css in VSC it immediately results in this NO INTERNET page appearing and I have to shut down the port and Go Live again.
I also opened the practice website that we are building for the class and the same thing is happening with that one as well. I have checked my html and css files on validator.w3.org and they have all checked out.
I tried changing the settings in VSC to set the browser to Chrome and also tried in Edge with the same results.
I removed the extension from VSC and reinstalled. No results. Please help!
I had to go into the settings in Devtools and reset.
open Devtools
click the gear icon at right side
scroll to bottom of settings
click "restore defaults and reload"
This made a whole variety of strange problems go away in Devtools and now it works as it should.

Aurelia/Babel 6 sourcemaps shown as html

I have an aurelia application updated to the latest beta, 1.0.0-beta.1.2.1 at the time of this writing. This version of aurelia already uses Babel 6, and my application is based on the based on the ASP.NET 5 ES2016 navigation skeleton.
"All of a sudden", whenever I try to open my untranspiled javascript source files in Chrome (Version 49.0.2623.110 m (64-bit)) Developer tools, for instance main.js, all I get to see is the html of Index.cshtml.
It doesn't matter which javascript file I try to open, it always shows the html of Index.cshtml instead of javascript.
The transpiled files are displayed correctly in Chrome Dev Tools.
I've had this before but it usually meant I had a binding or templating error somewhere, but in this case the application works perfectly, so it probably has to do with the sourcemaps... Or does it?
My questions are:
What is the best way to track down a subtle binding or templating
error in Aurelia? Everything I've tried to do in my applcation works
fine, but I don't want to rule out this being my own fault just yet.
In case it's not my fault, has anybody come across this before? What
is the reason the sourcemaps are not working; is it Aurelia? is it
Babel 6? Is it Chrome?
Update
It doesn't seem to be a Chrome issue; the same problem occurs in Edge.
Update 2
By turning off Enable javascript sourcemaps on Chrome Developer Tools I can debug de transpiled code.
The transpilation gulp tasks I'm using are copy/pasted from the version mentioned above.
Has anybody else come across this issue?
Ok, I think I've found the problem.
I changed includeContent to true for sourcemaps.write in the build-system gulp task defined in build\tasks\build.js, so that line 23 of that file looks as follows:
.pipe(sourcemaps.write({ includeContent: true}))
This comes set to false in the navigation skeleton, so more people should have this same issue. Anyhow, this seems to have solved the problem.
I also removed the sourceRoot: "/src" parameter in that call, as it is only necessary when includeContent is false.

Google Chrome Dev Tools inspect element styles not showing

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.

Umbraco - Unable to navigate to sections other than Content after upgrade to 4.5.2

I've tried posting this on the Umbraco forums to no avail. Hoping to find some help here.
I thought I upgraded successfully from 4.0.4.2 to 4.5.2 (on my way to 4.8...) as I received no errors and everything seemed to go smoothly. However, in the backoffice, when I click on any section other than Content, I get redirected back to Content. I can manually reach each section by typing in the name of it after the # sign like: #media, but as soon as I click on a tree item, it redirects me back to Content. Any ideas would be appreciated.
2 thoughts:
You're cacheing some of the old javascript in your browser. Try clearing your cache. IE can be stubborn in this regard; preferably try in Chrome.
Personally, if your site is working under 4.5.2, I wouldn't sweat the back office issue and just continue with the upgrade to 4.8.1. There will likely be new problems to solve there anyway :) and the backoffice issue may go away.
Updating the icons via the following script fixed this problem. Links must run off the appIcon field. Not sure why this is not executed when the database is updated via the 4.5.2 upgrade.
update umbracoApp
set appIcon = '.tray' + appAlias
where appAlias IN ('content','media','users','settings','developer','member')

Waiting mouse cursor in my GWT application stays infinitely (only in Chrome, only in Production)

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.