Custom.CSS Has Stopped Working in 32.0.1700.76 M Google Chrome Update

Custom.css has stopped working in 32.0.1700.76 m Google Chrome update

Support for Custom.css has been removed from Chrome in version 32.

This answer provides two methods for easily activating style sheets in the developer tools. The second method is recommended, but only works for Chrome 33+, the first method also works for Chrome 32.

Both methods are Chrome extensions, to use the examples below, follow the following steps:

1. Create a directory and put the following files in it.
2. Go to chrome://extensions
3. Select "Developer mode"
4. Click on "Load unpacked extension"
5. Select the directory you just created.

True emulation of Custom.css

This section uses one of the two techniques described at How to inject javascript into Chrome DevTools itself. This extension can easily be generalized to fully emulate Custom.css, i.e. activate the style sheet on every page like Custom.css.

Note: If you're using Chrome 33+, then I strongly recommend the method in the next section over this one.

manifest.json

{
   "content_scripts": [{
      "js": [ "run_as_devtools.js" ],
      "matches": [ "<all_urls>" ]
   }], 
   "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC4r/pUHVPYQTn7vu3YHT52I0SKM15OBOTi0Jii4q5Koxd3Gdc/WXdqC2YgMA25J5PRiSubu/nHFf12Ubp3OZyNqB3j45ZscQ+tH1bwcV+cqdvv/Ik6VQaS6/qLmenLdFPKOCg/g1L1iKZu6Jjny6GlovpBj+7gjWQZBIoGBd70HQIDAQAB",
   "manifest_version": 2,
   "name": "Emulate Custom.css",
   "version": "1.0",
   "web_accessible_resources": [ "Custom.css" ]
}

run_as_devtools.js

if (location.protocol === 'chrome-devtools:') (function() {
    'use strict';
    var l = document.createElement('link');
    l.rel = 'stylesheet';
    l.href = chrome.runtime.getURL('Custom.css');
    document.head.appendChild(l);
})();

Custom.css

/* whatever you had in your Custom.css */

---

Official method (Chrome 33+ only)

If you want to customize your devtools style, chrome.devtools.panels.applyStyleSheet has to be used. This feature is currently hidden behind a flag (--enable-devtools-experiments, requires relaunch of Chrome) and a checkbox (after enabling the flag, open the devtools, click on the gears icon, go to Experiments and check "Allow UI themes").

manifest.json

{
  "name": "<name> DevTools Theme",
  "version": "1",
  "devtools_page": "devtools.html",
  "manifest_version": 2
}

devtools.html

 <script src="devtools.js"></script>

devtools.js

var x = new XMLHttpRequest();
x.open('GET', 'Custom.css');
x.onload = function() {
    chrome.devtools.panels.applyStyleSheet(x.responseText);
};
x.send();

Custom.css

/* whatever you had in your Custom.css */

For more info, see https://code.google.com/p/chromium/issues/detail?id=318566

font awesome icons not always displaying in the latest Google Chrome Version 32.0.1700.76 m

It seems that the problem deals with some chrome extensions. In my case I have disabled Adblock Plus and all icons are shown now.

Can I change the size or font in the view page source section from a browser?

You could assign your favorite editor to view the source from IE and FireFox.

View Webpage Source Code in Your Favorite Text Editor – Firefox

Use an Alternate Source Viewer with IE

Last option in Drop-down is not getting hover effect in Google Chrome 32.0.1700.76 m

It is Bug . Issue 336348:Last option of select does not get highlighted on mouse hover

and also see Issue 334227:[Aura] Regression : Last dropdown item not highlighted on mouse-hover

---

It's not the problem with your code it's due to Google Chrome Bug.

---

With more than 3 options this bug comes into play.

---

This issue has been fixed in Google Chrome latest Version 32.0.1700.102 m.

Solution Update your Google Chrome to latest Version.

jquery hashchange troubles in chrome 32.0.1700.76 m

hashchange is not fired on page load

The hashchange event is only triggered when you manually change the hash or when you click an in-page anchor link (<a href="#advanced">Advanced</a>). Reloading a page without changing the hash does not trigger hashchange.

You should refactor your hash-checking code into a new function and execute it

1. on the hashchange event
2. on page load.

Consider this code:

function changeLayoutByHash() {
    var page = location.hash.slice(1);
    $('[data-page=' + page + ']').slideDown();
    // etc.
}

$(window).bind('hashchange', changeLayoutByHash );

$(window).ready( changeLayoutByHash );

As per your question, I don't see inconsistencies in the way Chrome handles this.

If you keep reloading example.com#advanced, hashchange will not be fired. Only when you change the hash to example.com#advance (delete a character), it's registered as a changed hash.

Debugging

To find out whether or not certain events are being fired, you can always write a little console.log('hashchange fired'); into your event handlers and then (with ChromeDev Tools open) see in the console what your program does.

Latest Google Chrome Update on 17th Jan 2014 triggers Page(s) unresponsive alert

The only way round this I believe is to ask clients to install the beta version of Chrome (which includes a fix for this bug). To do this they should select to instal the Beta channel for Windows (or Mac) from here http://dev.chromium.org/getting-involved/dev-channel.

My application runs fine again using the beta version.

I suspect the next chrome version will be released soon anyway as this bug is causing widespread problems.

---

Related Topics