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

问题

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

回答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

回答2:

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.

回答3:

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

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

回答4:

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

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

来源：https://stackoverflow.com/questions/10289703/can-i-change-the-size-or-font-in-the-view-page-source-section-from-a-browser

标签

google-chrome

fonts