css3 - page - inspeccionar elemento chrome guardar cambios

Custom.css ha dejado de funcionar en 32.0.1700.76 m actualización de Google Chrome

Question

Utilizo algunos temas para Google Developer Tools desde este sitio web: http://devthemez.com/themes/chrome-developer-tools

Sin embargo, después de la actualización de 32.0.1700.76 m, todos los temas han dejado de funcionar.

¿Qué debo hacer para que funcionen nuevamente?

Answer 1

Ahora hay temas de desarrollador en Chrome Store para 33+

Abre chrome: // flags y habilita los experimentos de Developer Tools. Abra la configuración de herramientas del desarrollador, seleccione la pestaña Experimentos y marque Permitir temas personalizados de IU. Instale cualquier tema, puede buscar " tema devtools " en Chrome Web Store. También te mantendrá al día.

ref

Answer 2

Como se indica en la respuesta de @Rob W: https://.com/a/21210882/933951 , el método oficial recomendado para aplicar las herramientas del desarrollador de Google Chrome es crear una extensión para reemplazar los estilos predeterminados que se aplican, utilizando el chrome.devtools.panels.applyStyleSheet .

El proceso de creación de una extensión de Chrome para este propósito puede ser un poco tedioso para proteger cada componente a mano desde cero, así que creé un pequeño complemento que proporciona una colección de temas incorporados y configuraciones de editor adicionales para las Herramientas de desarrollo de Chrome. Las extensiones también ofrecen a los desarrolladores la capacidad de crear temas personalizados adicionales utilizando un sistema de plantillas Sass simple sin escribir su propia extensión .

1. Instalar la extensión DevTools Author Chrome desde Chrome Web Store
2. Habilite los experimentos de Developer Tools en chrome: // flags / # enable-devtools-experiments. Reinicie Chrome para que las banderas surtan efecto.
3. Abra DevTools (cmd + opt + I); Configuraciones> Experimentos> marca Permitir temas personalizados de interfaz de usuario.

Esto proporcionará, de manera inmediata, las siguientes características:

• La capacidad de elegir entre +25 temas de editor personalizados
• Compatibilidad con fuentes personalizadas a través de las fuentes del sistema habilitadas
• Control incremental del tamaño de fuente, desde 10px - 22px

Si desea contribuir temas adicionales, puede seguir los pasos a continuación:

Tenedor el repositorio GitHub y luego siga los pasos a continuación. La extensión Devtools Author Chrome se construye usando NodeJS y GruntJS .

Instalación:

$ git clone [email protected]:<username>/devtools-author.git
$ cd devtools-author
$ npm install

Desarrollo:

$ grunt serve

1. Una vez que se ejecuta roncado, para instalar la extensión de desarrollo en Chrome, abra Configuración > Más herramientas> Extensiones y haga clic en el botón Cargar la extensión desempaquetada ... (también habilite Allow incognito continuación si lo desea).
   • (Desactive DevTools Author si tiene la extensión instalada desde Chrome Web Store).
   • Asegúrese de que los experimentos de Developer Tools estén habilitados y que los temas de UI personalizados estén permitidos.
2. Reinicie DevTools. Creo que la forma más rápida de ver cambios es desacoplar DevTools en una ventana separada y luego abrir una ventana DevTools posterior ( cmd + opt + I mientras se enfoca la ventana DevTools actual) después de guardar los cambios y volver a cargar los recursos. A continuación, deberá volver a cargar (cerrar y volver a abrir) la ventana DevTools posterior después de realizar los cambios.

Creando temas adicionales

1. Haga una copia de una de las plantillas de la app/styles/themes/templates/ y cambie el nombre del archivo por el nombre de su tema sin el guión bajo , es decir. si su tema se llama aloha , dentro de la app/styles/themes/ , copie las templates/_theme-template.scss y aloha.scss nombre a aloha.scss
2. Agregue valores de color para la paleta en función de las variables resaltadoras de sintaxis del código en su archivo scss.
   • Si desea una orientación más específica para su tema que lo que se admite de inmediato, puede agregar esos estilos al final de su archivo de tema, después de @include styles() .
3. Agregue su objeto de paleta de colores (nombre y matriz de colores) a themes.json en la app/scripts/
4. En DevTools, seleccione su paleta de temas en el panel Configuración del autor .
5. Vista previa y ajuste sus colores según sea necesario. Ver Desarrollo - Paso 2 .
6. ¡Comprométase y envíe sus cambios a su repositorio, luego cree una solicitud de extracción para su nuevo tema una vez que esté listo!

Answer 3

El desarrollador mauricecruz ha creado una buena herramienta para crear temas personalizados de Chrome DevTools.

https://github.com/mauricecruz/zero-base-themes

Es mucho más fácil que escribir un archivo CSS (en mi opinión).

Answer 4

En mi caso, no me importa tanto temer devtools como reemplazar CSS en ciertos sitios (a la greasemonkey). De acuerdo con el Hombre en sí (Paul Irish) el reemplazo recomendado (para ese caso de uso al menos) es una extensión de Chrome llamada Control Freak . Lo probé y funciona muy bien para anulaciones únicas de JS / CSS por sitio. No estoy seguro sobre el tema per se, pero debería ayudar a las personas que solo buscan reemplazar la funcionalidad básica de Custom.css como yo.

Answer 5

Realmente no podía entender todo de Rob W, pero para mí

manifest.json

{
"name": "__something__",
"version": "1",
"content_scripts": [
{
"matches": ["__link_filter__"],
"css": ["__filename__.css"]
}
],
"manifest_version": 2
}

y el archivo css en la misma carpeta hizo lo que yo quería. Cómo cargar esta carpeta ya está respondida aquí.

Answer 6

Usé las instrucciones para Chrome 32, pero no funcionó. Mi objetivo era invertir los colores de las herramientas de desarrollo. Creé un directorio y coloqué tres archivos en él, Custom.css, Manifest.json, run_as_devtools.js.

Custon.css

#-webkit-web-inspector {
-webkit-filter: invert(1);
font-weight: bold !important;
}

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);
})();

Answer 7

La compatibilidad con Custom.css se eliminó de Chrome en la versión 32.
Esta respuesta proporciona dos métodos para activar fácilmente hojas de estilo en las herramientas de desarrollador. Se recomienda el segundo método, pero solo funciona para Chrome 33+, el primer método también funciona para Chrome 32.

Ambos métodos son extensiones de Chrome, para usar los ejemplos a continuación, siga los siguientes pasos:

1. Crea un directorio y coloca los siguientes archivos en él.
2. Ir a chrome://extensions
3. Seleccione "Modo desarrollador"
4. Haga clic en "Cargar extensión sin empaquetar"
5. Seleccione el directorio que acaba de crear.

La verdadera emulación de Custom.css

Esta sección usa una de las dos técnicas descritas en Cómo inyectar javascript en las DevTools de Chrome . Esta extensión se puede generalizar fácilmente para emular Custom.css, es decir, activar la hoja de estilos en cada página como Custom.css.
Nota: Si usa Chrome 33+, recomiendo encarecidamente el método en la siguiente sección sobre este.

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 */

Método oficial (solo Chrome 33+)

Si desea personalizar su estilo chrome.devtools.panels.applyStyleSheet , se debe usar chrome.devtools.panels.applyStyleSheet . Esta función está oculta actualmente detrás de una bandera ( --enable-devtools-experiments , requiere relanzar Chrome) y una casilla de verificación (después de habilitar la bandera, abra las herramientas de devtools, haga clic en el icono de engranajes, vaya a Experimentos y seleccione "Permitir temas de IU" ").

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 */

Para obtener más información, consulte https://code.google.com/p/chromium/issues/detail?id=318566