Za kilka godzin mam prezentację w której chcę pokazać kilka rzeczy w Chrome i nie tylko. Jednak pokazywanie rzeczy w chrome jest Ciężkie – mianowicie literki są bardzo małe i jest to jednak słabo widoczne:
Na screenshotach to może i dobrze wygląda, jednak na rzutniku jest słaaaaabo :)
Chrome bez modyfikacji
Pierwszą opcję jaką mamy to będąc w consoli należy kliknąć CTRL +/- – plus dla zwiększenia, minus dla zmniejszenia, CTRL 0 dla przywrócenia domyślnych wartości.
Chrome pamięta to pomiędzy instancjami:
Ctrl + Dla Chrome poniżej wersji 32
Drugą opcją jest plik Custom.css ale działa on jedynie dla Chrome poniżej wersji 32. Plik można znaleźć w katalogu:
C:Users<user>AppDataLocalGoogleChromeUser DataDefaultUser StyleSheets
I zmodyfikować go dodając:
/* larger font size */
body.platform-mac.platform-mac-snowleopard .monospace,
body.platform-mac.platform-mac-snowleopard .source-code,
body.platform-windows .monospace, body.platform-windows .source-code ,
body.platform-linux .monospace, body.platform-linux .source-code {
font-size: 20px !important;
font-family: Consolas, Lucida Console, monospace;
}
Dla Chrome w wersji 32 wzwyż
Ale, od wersji 32 wzwyż to się zmieniło, teraz inaczej się ładuje szablony – stety lub niestety.
By to zrobić trzeba wykonać kilka kroków:
- Włączamy Enable Developer Tools experimetns
- Otwieramy dev tools
Ctrl + Shift + Ii kilkamy settings - Wchodzimy na zakładkę
Experiments - Zaznaczamy opcję
Allow custom UI themes
Teraz możemy stworzyć własny theme. Na dysku tworzymy katalog a w nim pliki:
- manifest.json
- devtools.html
- devtools.js
- custom.css
Po kolei wklejamy do plików
manifest.js
{
"name": "Larg Font DevTools Theme",
"version": "1.1",
"description": "Just larg font",
"devtools_page": "devtools.html",
"manifest_version": 2
}
devtools.html
<html> <head> <body> <script src="devtools.js"></script> </body> </html>
devtools.js
var xhr = new XMLHttpRequest();
xhr.open("GET", "/custom.css", false);
xhr.send();
chrome.devtools.panels.applyStyleSheet(xhr.responseText);
custom.css
/* larger font size */
body.platform-mac.platform-mac-snowleopard .monospace,
body.platform-mac.platform-mac-snowleopard .source-code,
body.platform-windows .monospace, body.platform-windows .source-code ,
body.platform-linux .monospace, body.platform-linux .source-code {
font-size: 20px !important;
font-family: Consolas, Lucida Console, monospace;
}
Mając tak przygotowany theme, otwieramy extensions w Chrome, zaznaczamy opcję Developer mode i klikamy Load unpacked extension… – wybieramy nasz folder i po sprawie :)
Od teraz, dev tools będą wyglądały tak:
Miłego hackowania :) w ten sposób można tworzyć własne themes dla Chrome :)
