How can I get chrome to auto-reload generated css?
I've seen lots of sites advising me to check the "Auto-reload generated CSS" checkbox in dev tools settings, eg Chrome's "Auto-Reload Generated CSS" not reloading page when SASS recompiles CSS.
But I do not see that option there, my options page has the option to enable CSS source maps, but there is no option for "Auto-reload generated CSS"
(Unfortunately, my work internet proxy prevents upload of images, so i can't upload an image)
Has this option been removed from chrome dev tools? Or is there some hidden config setting I need to change?
I'm using chrome version 53.0.2785.116 m (64-bit) on Windows 7 SP1.
Thanks in advance for any help.
See https://crbug.com/642802:
When you add a folder to the workspace and establish mapping, this happens automatically now.
See Set Up Persistence with DevTools Workspaces:
In case you've already mapped your local folder to your workspace, but the browser is still serving the network folder contents to automatically stage persistent changes in the browser, map local files in the folder to a URL:
How we can enable live sass in devtools?
Base on Umaar post in own blog
https://umaar.com/dev-tips/103-live-sass/
To clarify "Enable CSS Source Maps" only allow your browser to show mappings between scss and css. Live SASS is is still experimental feauture. You'll be able to enable it by pressing SHIFT button six times on the experimental tab in the dev tools settings.
I tried it in latest unstable chrome build on Linux and it doesn't seem to work, so you'll need latest Canary build.
UPDATE:
It works in 53.0.2763.0 dev build on Linux.
Update:
Looking at this again, there appears to be a new experimental feature that is apparently in Chrome Canary, which takes out the need to run sass watch I think. However, I am unable to actually find where this gets enabled. I left my original answer as it may be of use still.
This is no longer an experimental feature. In Settings, make sure 'Enable CSS source maps' is enabled and (optionally) 'Auto-reload generated CSS'.
You can add your source files as a Workspace and live edit:
On a side note, to enable experimental features in Chrome, navigate to chrome://flags/, enable Developer Tools experiments and restart Chrome.
In Settings, you will see a new Experiments section:
When you just download Google Chrome for the first time, what is the default setting on source maps?
There is a checkbox in the general settings panel of the Chrome debugger that says 'Enable JS source maps' - Is this checked or unchecked by default when you install Chrome for the first time? Mine is ticked, but I can't remember whether it was like that from the beginning or if I ticked it manually - Resetting Chrome settings to factory defaults doesn't seem to reset the debugger settings so there is no way to tell.
It's for a tutorial I'm writing.
Following Rob W's advice, it appears that source mapping is enabled by default.
Chrome browser by default is blocking mixed content. How do I adjust my settings/configuration to allow mixed content without making any adjustments on the UI every time?
I have found two solutions but neither of them work:
Several articles say you can adjust this under the Security section
of "Under the Hood" in the Options. This option no longer seems to
exist. There is no Under The Hood tab and there is no such dropdown
to adjust how Chrome handles mixed content as far as I can tell.
Another option is to add the --allow-running-insecure-content flag
to your command line. I did this like so: "C:\Program
Files\Google\Chrome\Application\chrome.exe"
--allow-running-insecure-content. However this made no difference. If I tried adding the flag inside the double quotes, then Windows
complains saying it is invalid.
So what option do I have now with the latest version of Chrome?
Steps as of Chrome v91 (6/17/2021):
Click the Not secure warning next to the URL
Click Site settings on the popup box
Near the bottom of the list is Insecure content, change this to Allow
Close settings, go back to the site, and Refresh the page
Older Chrome Versions:
timmmy_42 answers this on: https://productforums.google.com/forum/#!topic/chrome/OrwppKWbKnc
In the address bar at the right end should be a 'shield' icon, you can
click on that to run insecure content.
This worked for me in Chromium-dev Version 36.0.1933.0 (262849).
In Windows open the Run window (Win + R):
C:\Program Files (x86)\Google\Chrome\Application\chrome.exe --allow-running-insecure-content
In OS-X Terminal.app run the following command ⌘+space:
open /Applications/Google\ Chrome.app --args --allow-running-insecure-content
Note: You seem to be able to add the argument --allow-running-insecure-content to bypass this for development. But its not a recommended solution.
The shield icon that is being mentioned was not in the sidebar for me either, however I solved it doing the following:
Find the shield icon located in the far right of the URL input bar,
Once clicked, the following popup should appear wherein you can click Load unsafe scripts,
That should result in a page refresh and the scripts should start working. What used to be an error,
is now merely a warning,
OS: Windows 10
Chrome Version: 76.0.3809.132 (Official Build) (64-bit)
Edit #1
On version 66.0.3359.117, the shield icon is still available:
Notice how the popup design has changed, so this is Chrome on version 66.0.3359.117.
Note: The shield icon will only appear when you try to load insecure content (content from http) while on https.
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" " --allow-running-insecure-content"
On OSX using the current Chrome build (2/20/2020, 79.0.3945.130), you can:
Click on the 'i' info icon on the left side of address bar.
Click Site Settings
Scroll down to Insecure content
Change it from Blocked (Default) to Allow
Reload the page and try your action again.
running the following command helps me running https web-page, with iframe which has ws (unsecured) connection
chrome.exe --user-data-dir=c:\temp-chrome --disable-web-security --allow-running-insecure-content
Another solution which is permanent in nature between sessions without requiring you to run a specific command when opening chrome is as follows:
Open a Chrome window
In the URL bar enter Chrome://net-internals
Click on "Domain Security Policy" in the side-bar
Add the domain name which you want to always be able to access in http form into the "Add HSTS/PKP domain" section
On OSX the following works from the command line:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-running-insecure-content
Chrome 46 and newer should be showing mixed content without any warning, just without the green lock in address bar.
Source: Simplifying the Page Security Icon in Chrome at Google Online Security Blog.
You could use cors anywhere for testing purposes. But its note recommend for production environments.
https://cors-anywhere.herokuapp.com/
something like: https://cors-anywhere.herokuapp.com/http://yourdomain.com/api
I'm trying to use the Chrome Experimental Devtools API.
I've tried running Chrome with: --enable-experimental-extension-apis as suggested here: http://developer.chrome.com/extensions/experimental.html and enabled the "Experimental Extension APIs" in the flags settings.
When I open the Console in Chrome (or Canary), I get the following:
chrome.devtools: undefined
chrome.experimental: undefined
I'm running Chrome 21.0.1180.77 beta-m. I've also tried Canary.
What am I missing?
As explained here: http://developer.chrome.com/extensions/devtools.html, the chrome.devtools APIs are only available in your devtools HTML page.
First, you need to create an HTML file and then add it to your extension's manifest under the "devtools_page" key. When you load your extension into Chrome and open the DevTools, you should see your new tab.
In that tab is the only place chrome.devtools will work.
chrome.experimental is different and will be available in all of your background pages and content scripts.
You need to run it only in Canary.
Plus when you run chrome add this flag to the command line:
path_to_chrome.exe --enable-experimental-extension-apis