Полезная информация

Список ответов на каверзные вопросы можно получить в FAQ-разделе форума.
  • Форумы
  •  » Firefox
  •  » Как изменить шрифт в Tools > Web Deleloper > Inspector?

№119-05-2015 23:28:17

EgorSokolov
Участник
 
Группа: Members
Зарегистрирован: 30-12-2006
Сообщений: 122
UA: Firefox 24.0

Как изменить шрифт в Tools > Web Deleloper > Inspector?

FireFox-24. Я до опупения искал способ изменить шрифт в Tools > Web Deleloper > Inspector, нашел такой совет:

Выделить код

Код:

/*  Styles for Web developer tools */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document regexp("chrome://browser/content/devtools/.*") {
    * {
        font-family:    "Fixedsys Excelsior 3.01" !important;
        font-size:      12pt !important;
    }
}

/*  Styles for Scratchpad */
.CodeMirror,
.CodeMirror pre {
    font-family:    "Fixedsys Excelsior 3.01" !important;
    font-size:      12pt !important;
}

но это влияет не на сам шрифт кода, а на шрифт интерфейса, т.е. надписи на кнопках, а мне надо изменить тот шрифт, который отображает html-код.

Отсутствует

 

№219-05-2015 23:40:58

turbot
Участник
 
Группа: Members
Зарегистрирован: 09-10-2011
Сообщений: 2529
UA: Firefox 41.0

Re: Как изменить шрифт в Tools > Web Deleloper > Inspector?

EgorSokolov
У меня в Stylish работает:

Выделить код

Код:

/*AGENT_SHEET*/
.CodeMirror,.devtools-monospace,#viewsource {
    font: 400 14px/16px "Liberation Mono"!important; /*насыщенность(font-weight), размер шрифта(font-size)/line-height, шрифт(font-family)*/
}

thumb2.jpg

Отсутствует

 

№320-05-2015 18:29:10

EgorSokolov
Участник
 
Группа: Members
Зарегистрирован: 30-12-2006
Сообщений: 122
UA: Firefox 24.0

Re: Как изменить шрифт в Tools > Web Deleloper > Inspector?

У меня ваш способ не сработал. Правда, я просто помещал код в файл userChrome.css, а Stylish никогда не использовал — может быть это работает только через Stylish? Не знаю, правильно ли я понимаю, но я всегда думал, что Stylish — это просто более удобное средство для userChrome.css. Но с другой стороны, ведь код из моего первого поста, будучи помещен в userChrome.css, работает безо всякого Stylish, правда, он даёт не тот эффект, который нужен мне.

Отсутствует

 

№420-05-2015 18:35:00

turbot
Участник
 
Группа: Members
Зарегистрирован: 09-10-2011
Сообщений: 2529
UA: Firefox 41.0

Re: Как изменить шрифт в Tools > Web Deleloper > Inspector?

EgorSokolov

Выделить код

Код:

/*AGENT_SHEET*/

- не работает в userChrome и userContent.css. А без него тепершний встроенный стиль не перебить.

Отредактировано turbot (20-05-2015 18:36:36)

Отсутствует

 

№520-05-2015 19:05:29

turbot
Участник
 
Группа: Members
Зарегистрирован: 09-10-2011
Сообщений: 2529
UA: Firefox 41.0

Re: Как изменить шрифт в Tools > Web Deleloper > Inspector?

EgorSokolov

Выделить код

Код:

@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");

@-moz-document url-prefix("chrome://"),url-prefix("view-source:"),url-prefix("about:"),url-prefix("data:"){
.CodeMirror,.devtools-monospace,#viewsource {
    font: 400 14px/16px "Liberation Mono"!important; /*насыщенность(font-weight), размер шрифта(font-size)/line-height, шрифт(font-family)*/
}
}

- держите. Проверил, работает и в userChrome.css. (хотя, не всё, если нужно еще и для кода страниц (#viewsource), то продублируйте стиль в userContent.css)

Отредактировано turbot (20-05-2015 19:12:39)

Отсутствует

 

№620-05-2015 20:32:43

EgorSokolov
Участник
 
Группа: Members
Зарегистрирован: 30-12-2006
Сообщений: 122
UA: Firefox 24.0

Re: Как изменить шрифт в Tools > Web Deleloper > Inspector?

Нет, вы знаете, ни фига что-то у меня это не меняет шрифт. Поместил ваш код сразу в оба файла: userChrome.css, userContent.css — никакого результата! По-прежнему эта проклятущая штатная мелкота "Courier New".

Отсутствует

 

№720-05-2015 20:47:52

turbot
Участник
 
Группа: Members
Зарегистрирован: 09-10-2011
Сообщений: 2529
UA: Firefox 41.0

Re: Как изменить шрифт в Tools > Web Deleloper > Inspector?

EgorSokolov
Заданный в стиле шрифт должен наличествовать в системе. Еще может причина в версии вашего браузера. В дэвтулз многое поменялось с 24-ой (ставить проверять лень).

Отредактировано turbot (20-05-2015 20:48:19)

Отсутствует

 

№820-05-2015 21:32:17

EgorSokolov
Участник
 
Группа: Members
Зарегистрирован: 30-12-2006
Сообщений: 122
UA: Firefox 24.0

Re: Как изменить шрифт в Tools > Web Deleloper > Inspector?

Заданный в стиле шрифт должен наличествовать в системе.

Я назначал шрифт, который в моей системе прописан (ну в смысле, что ваш "Liberation Mono" менял на "Fixedsys Excelsior 3.01"). Для надежности, пробовал даже verdana, которая уж по-любому должна быть.

Отредактировано EgorSokolov (20-05-2015 21:34:57)

Отсутствует

 

№920-05-2015 22:29:09

turbot
Участник
 
Группа: Members
Зарегистрирован: 09-10-2011
Сообщений: 2529
UA: Firefox 41.0

Re: Как изменить шрифт в Tools > Web Deleloper > Inspector?

EgorSokolov
Проверил на 24-ой, работает. Единственное, .viewContainer еще добавить нужно, для scratchpad'а.
thumb.jpg 
Ищите причину у себя.

Отсутствует

 

№1021-05-2015 02:12:39

EgorSokolov
Участник
 
Группа: Members
Зарегистрирован: 30-12-2006
Сообщений: 122
UA: Firefox 24.0

Re: Как изменить шрифт в Tools > Web Deleloper > Inspector?

Ищите причину у себя.

Мне кажется, я нашел причину. Сначала я добавлял код в userChrome.css, где уже были некоторые настройки (они не имеют отношения к DeveloperTools, это просто разные твики интерфейса FireFox) и добавленный код ни фига не работал. Но мне вдруг пришло в голову создать userChrome.css только с вашим кодом (т.е. кроме этого кода в нем ничего нет) и — о чудо! — шрифт изменился! Короче, затык был вот в чём.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");     /* строка в моём старом userChrome.css */
@namespace

xul

url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* правильная строка в  userChrome.css */

В моём старом CSS не было "XUL" (я его пометил). После того, как я его добавил, код заработал. Почему там этого "XUL" не было, не знаю. Шаблон userChrome.css я взял давно из какого-то FireFox, когда вместе с ним (с FireFox'ом) уже шел образец userChrome-example.css (ну или как он там назывался, точно уже не помню). Во всяком случае все мои прежние настройки с тем шаблоном нормально работали, поэтому я даже не думал об этой мелочи и не обращал на неё внимания.

P.S. за код вам большое спасибо, теперь хоть видимость нормальная стала :)

Отсутствует

 

№1121-05-2015 02:53:35

turbot
Участник
 
Группа: Members
Зарегистрирован: 09-10-2011
Сообщений: 2529
UA: Firefox 41.0

Re: Как изменить шрифт в Tools > Web Deleloper > Inspector?

Она и без - правильная. Но только почему-то в этом случае не работает. idontnow.gif

(А вторую строчку (с html), если вам не нужен этот стиль для исходного кода страницы (что в окне открывается), можете вообще удалить. Тем более, что она будет работать только в userContent.css или Stylish'е)

Отсутствует

 

№1221-05-2015 23:49:23

EgorSokolov
Участник
 
Группа: Members
Зарегистрирован: 30-12-2006
Сообщений: 122
UA: Firefox 24.0

Re: Как изменить шрифт в Tools > Web Deleloper > Inspector?

У меня насчёт Tools > Web Deleloper > Inspector возник еще вопросик. Я сразу этого не заметил, это в принципе мелочь, но просто хотелось бы "допилить" его, так сказать, до полного "орднунга". Так вот, если на веб-странице есть какие-то комментарии (ну т.е. то, что заключено в

<!--

некий текст

-->

, то вот эти комментарии отображаются не моим кастомным шрифтом, а всё тем же штатным, только размер похоже у него увеличивается, а гарнитура, видимо, не меняется. Вот как бы мне еще и эти комментарии обороть? :)

* * *

И еще. Знаете, если уж зашел разговор об просмотровщике кода веб-страниц (если я правильно понимаю, то речь идет об окне, которое открывается по клавиатурной комбинации CTRL + U), то я ради интереса решил настроить и его. Поместил в userContent.css вот такой код:

Выделить код

Код:

@-moz-document url-prefix(view-source:) {
   #viewsource {
      font-family: "Fixedsys Excelsior 3.01" !important;
      font-size: 12pt !important;
      background-color: rgb(255, 248, 220);
      }
}

Это сработало, но есть 2 момента, которые можно бы улучшить, только я не знаю как это сделать.

(1). -- в расцветке кода страницы применён курсив и жирный шрифт. Мне это не нравится потому что курсив на мониторах я вообще терпеть не могу а мой кастомный "Fixedsys Excelsior" уже сам по себе имеет плотное начертание, а в жирном виде он становится толстым (ну т.е. его нет смысла делать жирным). Как я понимаю, где-то должна быть CSS-ка, где описана эта расцветка, таким образом, если поковырять эту CSS-ку, то можно изменить расцветку. Но я не могу найти эту CSS-ку.

(2). -- фон окна просмотровщика -- background-color не заполняет всё окно в том случае если есть длинные строки, которые не влазят по ширине экрана (т.е. когда в его окне есть горизонтальный скролл). Фон заполняет только видимую часть экрана, а если проскроллить код вправо, то там уже будет белый фон. -- Вот этот белый фон тоже хотелось бы как-то убрать … (извините, что не выкладываю скриншот, просто муторно возиться, но я думаю понятно, о чём я говорю).

Отсутствует

 

№1322-05-2015 00:23:32

turbot
Участник
 
Группа: Members
Зарегистрирован: 09-10-2011
Сообщений: 2529
UA: Firefox 41.0

Re: Как изменить шрифт в Tools > Web Deleloper > Inspector?

скрытый текст

EgorSokolov пишет

CSS-ка,

resource://gre-resources/viewsource.css
DOM Inspector + Custom Buttons c Attributes Inspector) - в помощь:
thumb2.jpg   
>

Выделить код

Код:

@-moz-document url-prefix(view-source:) {
  *|*:root {
      background-color: rgb(255, 248, 220)!important;
  }
  #viewsource {
      font-family: "Fixedsys Excelsior 3.01" !important;
      font-size: 12pt !important;
      font-weight: normal!important; /* чтоб не жирный http://htmlbook.ru/css/font-weight */
  }
}

Не знаю, можно ли там одними стилями сделать полноценную подсветку синтаксиса, так что вот вам еще в виде букмарклета, можете поковырять под себя:

Выделить код

Код:

javascript:(function(){var%20q='%20%20',C={img:1,br:1,link:1,input:1,hr:1,meta:1},u=false,v=0,D=1,g=window.document,m=window.location,w='resizable=yes,scrollbars=yes,location=no',h='</span></li>';var%20x=function(a){return'<span%20class=%5C'tag%5C'>&lt;'+a+''};var%20y=function(a){return(a%3F'/':'')+'&gt;</span>'};var%20z=function(a,b){if(b||C[a.toLowerCase()])return'';return'<span%20class=%5C'tag%5C'>&lt;/'+a+'&gt;</span>'};var%20j=function(){var%20a=v.toString();while(a.length<3)a='0'+a;return'<li%20class=%5C'line'+(D&&((v++)&1)%3F'%20dark%5C'':'%5C'')+'><span>'};var%20n=function(a){return%20a.replace(/</g,'&lt;').replace(/>/g,'&gt;')};var%20E=function(a){var%20b=a.doctype,c='';if(b){c=j()+x('!DOCTYPE')+'%20<span%20class=%5C'attrDoc%5C'>'+b.nodeName+(b.publicId%3F'%20PUBLIC%20%5C''+b.publicId+'%5C'':'')+(b.systemId%3F'</span></span>'+h+j()+'<span%20class=%5C'tag%5C'><span%20class=%5C'attrDoc%5C'>'+q+'%5C''+b.systemId+'%5C'':'')+'</span>'+y()+h}return%20c};var%20F=function(a){var%20b=a.attributes,c=null,d='';for(var%20f=0;c=b[f];f++){if(c.specified&&c.value){d+='%20<span%20class=%5C'attrTitle%5C'>'+c.name+'</span>=<span%20class=%5C'attrValue%5C'>%5Cx22'+n(c.value.replace(/%5Ct/g,q))+'%5Cx22</span>%20'}}return%20d};var%20r=function(a){return%20n(a.nodeValue.replace(/[%5Cn%5Ct%5Cr%5Cu00A0]+%20*/g,'').replace(/%20+/g,'%20'))};var%20G=function(a){var%20b=0,c='';while(b<a){c+=q;b++}return%20c};var%20A=function(a,b,c){var%20d='',f=G(b++);switch(a.nodeType){case%201:{var%20i=a.childNodes,k=null;var%20s=(i.length==0)||(i.length==1&&i[0].nodeType==3);var%20t=u&&i.length==0;var%20l=j()+f+x(a.nodeName)+F(a)+y(t);if(!s)l+=h;for(var%20B=0;k=i[B];B++){l+=A(k,b,!s&&k.nodeType==3)}if(s){l+=(a.nodeName.toLowerCase()=='textarea'%3Fn(a.value):'')+z(a.nodeName,t)+h}else{l+=j()+f+z(a.nodeName,t)+h}return%20l}case%203:{if((d=r(a))&&c){return%20j()+f+d+h}else{return%20d}}case%204:{d=r(a);return%20j()+f+'<span%20class=%5C'cdata%5C'>&lt;![CDATA[</span>'+d+'<span%20class=%5C'cdata%5C'>]]&gt;</span>'+h}case%208:{d=r(a);return%20j()+f+'<span%20class=%5C'comment%5C'>&lt;!--'+d+'--&gt;</span>'+h}}return%20a.nodeType};var%20H=function(a){var%20b,c='';if(a){var%20d=a.getSelection().getRangeAt(0),f=d.commonAncestorContainer;if(f.nodeType==3||f.nodeType==4)f=f.parentNode;b=f.cloneNode(false);b.appendChild(d.cloneContents());var%20i=d.startContainer,k=d.endContainer;if(i!=f.firstChild||(i.nodeType==3&&d.startOffset!=0))b.insertBefore(g.createTextNode('%5Cu2026'),b.firstChild);if(k!=f.lastChild||(k.nodeType==3&&d.endOffset!=k.nodeValue.length))b.appendChild(g.createTextNode('%5Cu2026'))}else{c=E(g);b=g.documentElement};c+=A(b,0);return%20c};var%20I=function(a){if(a&&a.getSelection){if(a.getSelection().toString())return%20a;for(var%20b=0,c,d;c=a.frames[b];b++){try{if(d=arguments.callee(c))return%20d}catch(e){}}}};var%20o=I(window);if(o){g=o.document;m=o.location;w+=',width=800,height=500,left=100,top=100'};u=/[a-z]/.test(g.documentElement.nodeName);var%20J='<!DOCTYPE%20html%20PUBLIC><html><head><title>Snapshot:%20'+((g.getElementsByTagName('title').length&&n(g.getElementsByTagName('title')[0].text))||(m.protocol+'//'+m.host+m.pathname))+'</title><style%20type=%5C'text/css%5C'>body{padding:0%205px;margin:0;font-family:sans-serif;font-size:.7em;background-color:%23FFF;color:%23000;}%23content{white-space:pre-wrap}ol{color:%23999;}span{color:%23000}.tag{color:%2305F}.attrTitle{color:%23E00}.attrValue{color:%23C0C}.attrDoc{color:%23800080}.comment{color:%23008000}.cdata{color:%2363D}.line{margin:0;padding:0}.dark{background-color:%23FAFAFA}</style></head><body><ol%20id=%5C'content%5C'>'+H(o)+'</ol></body></html>';var%20p=window.open('about:blank','_blank',w);p.document.write(J);p.document.onkeydown=function(a){if(a.keyCode==27)p.close()};p.document.close()})()
EgorSokolov пишет

вот эти комментарии

А тут надо для каждого сайта искать id этих элементов:
thumb4.jpg 
и в стиль, в userContent.css:

Выделить код

Код:

@namespace url(http://www.w3.org/1999/xhtml);
.codebox, другое-id--или-класс, и.т.д {
      background-color: rgb(255, 248, 220)!important;
      color: #000!important;
      font-family: "Fixedsys Excelsior 3.01" !important;
      font-size: 12pt !important;
      font-weight: normal!important; /* чтоб не жирный http://htmlbook.ru/css/font-weight */
}


А вообще, по стилям есть отдельный раздел: CSS-стили

Отредактировано turbot (22-05-2015 00:45:58)

Отсутствует

 
  • Форумы
  •  » Firefox
  •  » Как изменить шрифт в Tools > Web Deleloper > Inspector?

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2020 Mozilla Russia GitHub mark
Язык отображения форума: [Русский] [English]