• 自定义Chrome的浏览器开发者工具DevTools界面的字体和样式

    Chrome浏览器开发者工具默认的字体太小，想要修改但没有相关设置。

    外观——字体可以自定义字体，但大小不可以调整。

    github上有人给出了方法

    整理为中文教程：

    1.打开浏览器开发者工具，点开设置——实验，勾上红框设置

    2.在电脑上建立一个文件夹，然后建一个devtools.html文件，内容：

    1. <html>
    2. <head>head>
    3. <body><script src="devtools.js">script>body>
    4. html>

    3.再建立一个devtools.js文件，内容：

    1. var x = new XMLHttpRequest();
    2. x.open('GET', 'style.css');
    3. x.onload = function() {
    4.     chrome.devtools.panels.applyStyleSheet(x.responseText);
    5. };
    6. x.send();

    4.再建立一个style.css文件，内容：

    1. /* 元素和console里的字体 */
    2. :host-context(.platform-windows) .monospace,
    3. :host-context(.platform-windows) .source-code,
    4. .platform-windows .monospace, 
    5. .platform-windows .source-code {
    6.     font-size: 14px !important;
    7.     font-family: GeistMono NFM, monospace !important;
    8. }
    9.  
    10. /* 没改成功 */
    11. :host-context(.platform-windows) .cm-editor,
    12. .platform-windows .cm-editor 
    13. {
    14.     font-size: 14px !important;
    15.     font-family: SauceCodePro NFM, monospace !important;
    16. }
    17.  
    18. /* 网络——预览里面的字体 */
    19. :host-context(.platform-windows) .network-item-view .cm-content .cm-line,
    20. .platform-windows .network-item-view .cm-content .cm-line
    21. {
    22.     font-size: 14px !important;
    23.     font-family: SauceCodePro NFM, monospace !important;
    24. }
    25.  
    26. /* 网络——预览里面的行高 */
    27. :host-context(.platform-windows) span.name-and-value,
    28. .platform-windows span.name-and-value 
    29. {
    30.     line-height: 17px;
    31. }
    32.  
    33. /* 网络——请求的地址 */
    34. :host-context(.platform-windows) .network-log-grid .name-column,
    35. .platform-windows .network-log-grid .name-column
    36. {
    37.     font-size: 14px !important;
    38.     /*font-family: SauceCodePro NFM, monospace !important;*/
    39.     font-family: GeistMono NFM, monospace !important;
    40. }
    41.  
    42. .monospace,
    43. .source-code {
    44.     font-size: 14px !important;
    45.     font-family: SauceCodePro NFM, monospace !important;
    46. }
    47.  
    48. ::shadow .monospace,
    49. ::shadow .source-code {
    50.     font-size: 14px !important;
    51.     font-family: SauceCodePro NFM, monospace !important;
    52. }

    5.再建立一个manifest.json文件，内容：

    1. {
    2.     "name": "Custom Chrome Devtools Theme",
    3.     "version": "1.0.0",
    4.     "description": "A customized theme for Chrome Devtools.",
    5.     "devtools_page": "devtools.html",
    6.     "manifest_version": 2
    7. }

    6.然后打开Chrome的管理扩展程序页面，勾选右上角的开发者模式，然后点击加载已解压的扩展程序，选择刚刚建立的文件夹就可以了。

    打开浏览器开发者工具后，可以再按 Ctrl+Shift+i 打开新的开发者工具，用于查看开发者工具各个元素的结构，用于构建你想要修改的地方的selector。

  • 相关阅读:
    java动态代理
    为什么传递SPIF_SENDCHANGE标志SystemParametersInfo会挂起？
    第67章 完整定义nopCommerce Jquery DataTable插件之初始化查询表单
    在springboot中使用jsp,设置webapp目录时的操作步骤
    数据结构——树（树的概念、优缺点、二叉树）
    面试题：数据库日期类型字段，需要兼容不同数据库，应该如何选择？
    分布式系统的一致性与共识(1)-综述
    Postman接口自动化测试实例
    Java 反射系列 —— 学习笔记
    Nodejs安装及npm配置（超详细）
  • 原文地址：https://blog.csdn.net/wangjingkaibear/article/details/136257913