I'm using angular ng-include on my page. Every time I make a change on the .html included, the changes doesn't take effect on chrome and Opera, but does take effect on Firefox. I'm using XAMPP to run my page. Any ideas?
This is probably because of angular's $templateCache.
A quick solution is to flush your browser's cache, or in Chrome dev tools on the bottom right click on the gear and tick the option Disable cache (while DevTools is open)
Related
I'm working on a small website and I'm writing a website almost from scratch. I'm using Bootstrap 4 and I'm modifying only basic CSS.
Whenever I open the Chrome Devtools, the website completely flips out and it looks like it keeps reloading. The entire website only loads from localhost, however, the network tab keeps showing repeating requests to the saem assets, over and over again. The second I quit Devtools, the entire behavior stops. I've tried installing a cache killer, tried incognito, but the problems keeps appearing.
I'm also using Octicons, and what I have noticed is that when I manage to get the Devtools to at least stay focussed at the right part, the <i class="oi oi-chevron-right"> node keeps flashing in purple, indicating there is a change to that node. I can't open it and even just clicking on it won't help, the entire CSS keeps shifting in the inspector bar and it seems like something is making rapid changes. It appears that Chrome re-applies styling changes that I made a few days back, such as locally modifying the margin of an element.
I was able to work on the website just fine a few days ago, but even moving back in commits won't keep the problem from happening. I am starting to think it is a bug with Chrome, but I can not confirm this in any way.
Is there anything that is known to break Chrome's Devtools, that might explain this behavior, or is there a way to clear the cache of the Chrome Devtools specifically?
The "Changes" tab in Devtools reports that there are no changes, but the CSS I see on page makes me seriously doubt it. Removing the icons entirely does not seem to resolve the problem, so I think the issue lies elsewhere. Breakpoints are not triggered either.
I'm not sure but,
Have you checked the chromium extension program?
When I open Developer tools and turn on device mode, and click any drop down on the page chrome renders options with minimum width and rest of the area as black.
I dont know what is causing this error. I tried to update my graphics card driver, but problem still exists.
After some googling, got to know that this is an issue in Chrome browser itself. Refer the following link for more info - https://bugs.chromium.org/p/chromium/issues/detail?id=553274&q=status%3Aunconfirmed&sort=-id&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&num=1000
How can I enable the overrides panel in my settings? I opened my Chrome and it's just gone, I've wasted most of my day trying to get this to work, but 0 answers on Google.
Thanks Chrome, just make my settings disappear, cool!
The Emulation panel is the new Overrides pane
The Overrides have been moved to the slide out tabs that you can access by pressing Esc on any panel.
You will find the settings you are looking for under the Emulation tab there.
I'm porting over a chrome extension to Firefox and need to refactor some of the css and html. I can't figure out a way to inspect the Panel though. Is there a way to do it, or is the only way trial and error?
Currently there is no way to inspect panels as they are. An somewhat-effective workaround could be to open your panel's html file in a tab in Firefox and use the responsive design view to view the panel at the intended size:
https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View
This problem is being worked on, here is a somewhat-related bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=950936
Since the last update of Google Chrome, a screen ruler shows up when inspecting an element. Does anyone know how to disable this ruler?
This is an old question, but now you can enable or disable now in Chrome Developer Tools -> Settings -> Show Rulers (you can also access the settings just pressing F1).
In Chrome 38, there is a "Toggle Device Mode" button to the left of menu items in developer tools. Clicking on it will toggle display of ruler and device emulation list.
Go to "Settings" -> "General" tab.
In the end of page, click on button "Restore defaults and reload".
=)
It's not possible for the moment.
You need to wait Chrome 25 or use Canari.
https://plus.google.com/115203843155141445032/posts/771CKRcKYdM
This is now known as Device Mode. It allows you to select different device screen sizes as well as emulate different Network Speeds.
You can enable/disable it by clicking the Phone Icon on your console.
Upgrading to the latest dev release fixed this for me:
http://www.google.com/chrome/intl/en/eula_dev.html?dl=mac
This started happening to me out of the blue. I use Chrome inspect element for developing, on a personal computer that no one else uses.
This morning, I had the whole rulers-and-menus thing appear as if out of nowhere.
The above suggestions did nothing. When I got to the configuration check-box for rulers, I discovered it was turned off.
I was able to get the old look back by resetting the defaults in the same config menu which held the rulers check-box. Hope that helps anyone stuck like I was.
When you have the unspect editor opened, Just go to settings by clicking the icon (top right on the unspector) there you will find a big button saying restore defaults and reload . That worked for me . Good luck
I'm using Chrome Canary (Version 45.0.2451.0 canary), and the presence of the rulers appears to be tied to whether Emulation is enabled. Restoring defaults (as suggested above) turns it off, or you can just go to the drawer at the bottom and do it.