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

Question

There is a small problem that might annoy me from time to time (idk if there are other people feel the same). Every time I use view page source from any browser, the text always turn out to be ugly and small (my computer's resolution is 1920x1080 with 17 inches in particular, which makes the letter extremely small and hard to see). Is there a way to change the font and the size in the view page source section from any browser? (Chrome, for example)

I know I could zoom in the page by mouse scrolling or by "ctrl" + "+", but that's not really the way I want to solve it.

Thanks

FWIW: in Chrome zooming with CTRL/CMD +/- does work but it also affects the page itself, so when you close the source and go back the whole site is smaller/bigger. This makes it extremely frustrating to use and not a good solution. — jerclarke, Jun 19 '14 at 14:59

score 25 · Answer 1 · edited May 23 '17 at 11:48

As of Chrome 32.0.1700.76 the custom.css doesn't work as outlined below.

Please see an updated answer here: Custom.css has stopped working in 32.0.1700.76 m Google Chrome update

The old way is as follows:

Go to the following directory:

%LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\

Mac:

~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

and open the Custom.css file. If it doesn't exist, create one.

Add the following lines:

body.platform-windows .monospace, 
body.platform-windows .source-code, 
td.webkit-line-content {
  font-size: 15px !important;
  font-family: Consolas, Lucida Console, monospace !important;
  tab-size: 2;
}

All you're doing is customizing classes used internally by Chrome. The .monospace class is pretty self evident. The .source-code class affects items in your developer tools (F12). The one that you are looking for is the td.webkit-line-content, it's the one that applies style to the line items when you choose to View page source.

You can also edit the line numbers as well by adding styles for td.webkit-line-number and can also edit the line number background by adjusting the style for div.webkit-line-gutter-backdrop.

Cheers.

Thanks for this. Saved my bacon when I accidentally uninstalled whatever default font Chrome uses for the View Source dialog. This should be the correct answer, but hey what does the OP know?! — adaam, Jun 13 '13 at 14:49
Support for overriding stylesheets has been removed as of Chrome 33. See: http://www.reddit.com/r/chrome/comments/1ymfgw/user_stylesheet_customcss_support_removed_in/ — , Sep 01 '14 at 22:53

score 2 · Answer 2 · edited May 26 '13 at 15:14

2

As Jeff Johnson said - for Mac the Stylesheet is under:

~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.css

edited May 26 '13 at 15:14

Matt

74,352
26
153
180

answered May 26 '13 at 15:11

mansur

248
2
9

score 2 · Answer 3 · answered Jun 12 '13 at 08:08

2

On linux platform (Ubuntu) the Custom.css file is in folder:

~/.config/google-chrome/Profile #/User Stylesheets/Custom.css

answered Jun 12 '13 at 08:08

sbrbot

6,169
6
43
74

Hameed · Accepted Answer · 2012-04-24T01:48:34.600

1

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

edited Apr 24 '12 at 01:48

answered Apr 23 '12 at 23:42

Hameed

2,227
1
21
31

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

4 Answers4

Linked