时间戳

首页 > 解决方案 > 可视化一个网站的html源码，经过JS处理后，保持正确的缩进

javascript - 可视化一个网站的html源码，经过JS处理后，保持正确的缩进

问题描述

我正在尝试深入研究一个复杂的网站，该网站JS也用于处理其组件。Inspector-Toolon很棒，但在firefox某些情况下，我更喜欢将纯html 源代码转储到本地文本文件中并使用我最喜欢的文本编辑器。在我的示例中，使用Ctrl + U Page Source 工具为我提供了页面的 Pre-JS html 代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=no"/>
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon" href="../assets/logo.png?version=1.9.1" />
    <link rel="stylesheet" type="text/css" href="../assets/open-stage-control.css?version=1.9.1" hot-reload/>
    <link rel="stylesheet" type="text/css" href="../assets/theme.css?version=1.9.1" hot-reload/>
    <link rel="stylesheet" type="text/css" href="../assets/fonts/fontawesome.min.css?version=1.9.1"/>
    <link rel="stylesheet" type="text/css" href="../assets/fonts/fa-solid.css?version=1.9.1"/>
    <link rel="stylesheet" type="text/css" href="../assets/fonts/roboto.css?version=1.9.1"/>
    <link rel="shortcut icon" href="../assets/favicon.png?version=1.9.1"/>
    <script src="../client/open-stage-control-client.js?version=1.9.1"></script>
</head>

<body class="editor-disabled">
    <osc-workspace class="vertical">
        <osc-panel-container class="horizontal" id="main">
            <osc-toolbar id="main-menu"></osc-toolbar>
            <osc-panel-container class="left">
                <div class="resize-handle left"></div>
                <div class="toggle-button left"></div>
                <osc-panel-inner class="left">
                    <osc-panel-header></osc-panel-header>
                    <osc-panel-content class="left" id="osc-tree"></osc-panel-content>
                </osc-panel-inner>
            </osc-panel-container>
            <osc-panel-container class="center">
                <osc-panel-header id="osc-greeting-header">
                    Open Stage Control <span class="version">v1.9.1</span>
                </osc-panel-header>
                <osc-panel-inner id="osc-container"></osc-panel-inner>
            </osc-panel-container>
            <osc-panel-container class="right">
                <div class="resize-handle right"></div>
                <div class="toggle-button right"></div>
                <osc-panel-inner class="right">
                    <osc-panel-header></osc-panel-header>
                    <osc-panel-content  class="right" id="osc-inspector"></osc-panel-content>
                </osc-panel-inner>
            </osc-panel-container>
            <osc-modal-container></osc-modal-container>
        </osc-panel-container>

        <osc-panel-container class="bottom minimized"  id="osc-console">
            <div class="resize-handle bottom"></div>
            <div class="toggle-button bottom"></div>
            <osc-panel-inner  class="bottom">
                <osc-panel-header></osc-panel-header>
                <osc-panel-content></osc-panel-content>
            </osc-panel-inner>
        </osc-panel-container>

    </osc-workspace>
    <div id="notifications"></div>

            <script>
                window.IP="127.0.0.1"
                window.ENV={}
                window.READ_ONLY=undefined
            </script></body>

</html>

这是我希望它获得的格式，但我错过了这么多创建的对象，JS processing因此我可以使用Ctrl + Shift + C Inspector Tool获取After-JS Source html 代码，但它被制表为与Inspector Tool本身一起使用. 解决方法是选择<html>or<body>标记并右键单击 and copy Inner HTML，然后我将得到以下信息

    <osc-workspace class="vertical" style="--color-scrollbar:rgba(109,181,253,0.25); --color-scrollbar-on:rgba(109,181,253,0.75);">
        <osc-panel-container class="horizontal" id="main">
            <osc-toolbar id="main-menu"></osc-toolbar>
            <osc-panel-container class="left disabled minimized" style="width: 0px; min-width: 0px;">
                <div class="resize-handle left drag-event" style="touch-action: none;"></div>
                <div class="toggle-button left"></div>
                <osc-panel-inner class="left">
                    <osc-panel-header>Project tree</osc-panel-header>
                    <osc-panel-content class="left" id="osc-tree"><div title="The session will be saved as a fragment: only the first child of root will be saved." class="fragment-mode-warning"><i class="fa fa-fw fa-exclamation-triangle"></i> Fragment mode enabled</div><input type="text" placeholder="Filter..." class="filter"><ol style="--depth: 1"></ol></osc-panel-content>
                </osc-panel-inner>
            </osc-panel-container>
            <osc-panel-container class="center">
                <osc-panel-header id="osc-greeting-header" class="hidden">
                    Open Stage Control <span class="version">v1.9.1</span>
                </osc-panel-header>
                <osc-panel-inner id="osc-container"><div id="WoVUaDanVO" data-widget="WoVUaDanVO" class="widget root-container flex-expand auto-height layout-grid layout-contain contains-tabs" style="--color-scrollbar:rgba(109,181,253,0.25); --color-scrollbar-on:rgba(109,181,253,0.75);"><inner style="grid-template: none / repeat(8, 1fr);" class="root"><div class="navigation main"><div data-widget="WydOgxHBNh" style="" class="tablink on">tab_1</div></div><div id="WydOgxHBNh" data-widget="WydOgxHBNh" class="widget tab-container flex-expand layout-default layout-contain contains-widgets show" style="--color-scrollbar:rgba(109,181,253,0.25); --color-scrollbar-on:rgba(109,181,253,0.75);"><inner><div id="WSRjfVaknN" data-widget="WSRjfVaknN" class="widget panel-container absolute-position no-inner-padding layout-horizontal layout-contain contains-widgets" style="top: 170rem; left: 210rem; --color-scrollbar:rgba(109,181,253,0.25); --color-scrollbar-on:rgba(109,181,253,0.75);"><style>#WSRjfVaknN { grid-column : span 9;}</style><inner style="justify-content: flex-start;"><div id="WKwpiIWR2I" data-widget="WKwpiIWR2I" class="widget button-container absolute-position flex-expand drag-event" style="top: 110rem; left: 60rem; touch-action: none;"><inner><label>button_1-1</label></inner></div><div id="WV3wJwNPYb" data-widget="WV3wJwNPYb" class="widget button-container absolute-position flex-expand drag-event" style="top: 110rem; left: 180rem; touch-action: none;"><inner><label>button_1-2</label></inner></div><div id="WqsOfoVS8j" data-widget="WqsOfoVS8j" class="widget button-container absolute-position flex-expand drag-event" style="top: 130rem; left: 310rem; touch-action: none;"><inner><label>button_1-3</label></inner></div><div id="W8F6uDIvvA" data-widget="W8F6uDIvvA" class="widget button-container absolute-position flex-expand drag-event" style="top: 140rem; left: 420rem; touch-action: none;"><inner><label>button_1-4</label></inner></div><div id="WNP4GNnJqc" data-widget="WNP4GNnJqc" class="widget button-container absolute-position flex-expand drag-event" style="top: 150rem; left: 530rem; touch-action: none;"><inner><label>button_1-5</label></inner></div><div id="WyOGdk4Liw" data-widget="WyOGdk4Liw" class="widget button-container absolute-position flex-expand drag-event" style="top: 160rem; left: 640rem; touch-action: none;"><inner><label>button_1-6</label></inner></div><div id="WCTyf07c7b" data-widget="WCTyf07c7b" class="widget button-container absolute-position flex-expand drag-event" style="top: 160rem; left: 740rem; touch-action: none;"><inner><label>button_1-7</label></inner></div><div id="WsXDTNkWIf" data-widget="WsXDTNkWIf" class="widget button-container absolute-position flex-expand drag-event" style="top: 160rem; left: 850rem; touch-action: none;"><inner><label>button_1-8</label></inner></div></inner></div><div id="WtnaO5GqWU" data-widget="WtnaO5GqWU" class="widget button-container absolute-position drag-event on" style="top: 580rem; left: 350rem; touch-action: none;"><inner><label>button_2-1</label></inner></div><div id="W7zncHUYO2" data-widget="W7zncHUYO2" class="widget button-container absolute-position drag-event" style="top: 580rem; left: 470rem; touch-action: none;"><inner><label>button_2-2</label></inner></div><div id="WYZNRYOv2T" data-widget="WYZNRYOv2T" class="widget button-container absolute-position drag-event" style="top: 600rem; left: 600rem; touch-action: none;"><inner><label>button_2-3</label></inner></div><div id="WAGBGGOqbw" data-widget="WAGBGGOqbw" class="widget button-container absolute-position drag-event" style="top: 610rem; left: 710rem; touch-action: none;"><inner><label>button_2-4</label></inner></div><div id="Wj3tBkQd3l" data-widget="Wj3tBkQd3l" class="widget button-container absolute-position drag-event" style="top: 620rem; left: 820rem; touch-action: none;"><inner><label>button_2-5</label></inner></div><div id="WS4x-CjZBj" data-widget="WS4x-CjZBj" class="widget button-container absolute-position drag-event" style="top: 630rem; left: 930rem; touch-action: none;"><inner><label>button_2-6</label></inner></div><div id="WEgsr-R1vi" data-widget="WEgsr-R1vi" class="widget button-container absolute-position drag-event" style="top: 630rem; left: 1030rem; touch-action: none;"><inner><label>button_2-7</label></inner></div><div id="Wf0Ryj4gNX" data-widget="Wf0Ryj4gNX" class="widget button-container absolute-position drag-event" style="top: 630rem; left: 1140rem; touch-action: none;"><inner><label>button_2-8</label></inner></div><div id="WuCztiYYGU" data-widget="WuCztiYYGU" class="widget button-container absolute-position drag-event" style="top: 740rem; left: 310rem; touch-action: none;"><inner><label>button_3-1</label></inner></div><div id="WqKriM9uoj" data-widget="WqKriM9uoj" class="widget button-container absolute-position drag-event" style="top: 740rem; left: 430rem; touch-action: none;"><inner><label>button_3-2</label></inner></div><div id="Wv9DLsME6Q" data-widget="Wv9DLsME6Q" class="widget button-container absolute-position drag-event" style="top: 760rem; left: 560rem; touch-action: none;"><inner><label>button_3-3</label></inner></div><div id="W4s1fAWx3C" data-widget="W4s1fAWx3C" class="widget button-container absolute-position drag-event" style="top: 770rem; left: 670rem; touch-action: none;"><inner><label>button_3-4</label></inner></div><div id="WrvKIuQuP5" data-widget="WrvKIuQuP5" class="widget button-container absolute-position drag-event" style="top: 780rem; left: 780rem; touch-action: none;"><inner><label>button_3-5</label></inner></div><div id="WoW2g_ZqNm" data-widget="WoW2g_ZqNm" class="widget button-container absolute-position drag-event" style="top: 790rem; left: 890rem; touch-action: none;"><inner><label>button_3-6</label></inner></div><div id="W5qTyQzDPx" data-widget="W5qTyQzDPx" class="widget button-container absolute-position drag-event" style="top: 790rem; left: 990rem; touch-action: none;"><inner><label>button_3-7</label></inner></div><div id="WQuEVSRGYy" data-widget="WQuEVSRGYy" class="widget button-container absolute-position drag-event" style="top: 790rem; left: 1100rem; touch-action: none;"><inner><label>button_3-8</label></inner></div></inner></div></inner></div></osc-panel-inner>
            </osc-panel-container>
            <osc-panel-container class="right disabled minimized" style="width: 0px; min-width: 0px;">
                <div class="resize-handle right drag-event" style="touch-action: none;"></div>
                <div class="toggle-button right"></div>
                <osc-panel-inner class="right">
                    <osc-panel-header>Inspector</osc-panel-header>
                    <osc-panel-content class="right" id="osc-inspector"></osc-panel-content>
                </osc-panel-inner>
            </osc-panel-container>
            <osc-modal-container></osc-modal-container>
        </osc-panel-container>

        <osc-panel-container class="bottom minimized" id="osc-console" style="height: 0px; min-height: 0px;">
            <div class="resize-handle bottom drag-event" style="touch-action: none;"></div>
            <div class="toggle-button bottom"></div>
            <osc-panel-inner class="bottom">
                <osc-panel-header><label>Console</label><div class="actions"><div title="Clear console" class="clear"><i class="fa fa-fw fa-trash"></i></div></div></osc-panel-header>
                <osc-panel-content><osc-console></osc-console><osc-console-input><textarea rows="1"></textarea></osc-console-input></osc-panel-content>
            </osc-panel-inner>
        </osc-panel-container>

    </osc-workspace>
    <div id="notifications"></div>

            <script>
                window.IP="127.0.0.1"
                window.ENV={}
                window.READ_ONLY=undefined
            </script>


<div class="select-area hidden"></div>

其中缩进在 4 层深度后被破坏，从而失去了代码的清晰度。

有没有办法复制这个After-JS 源 HTML保持缩进整齐？

标签： javascripthtmlbrowserindentation

解决方案

事实证明，JS-Processed语法可能总是在线显示。在这种情况下，您可以将此文本格式化为更易于管理的格式，在我的情况下，我使用我最喜欢的text-editor vim并使用我必须使用的 linux（假设您nodejs已经安装）在您的 vim 中安装以下插件

NeoBundle 'Chiel92/vim-autoformat'

安装 js-beautify

sudo npm install js-beautify

确保在路径上设置了 nodejs 二进制包目录，添加以下行

vi .profile
# set node-js executables in the PATH
if [ -d "$HOME/node_modules/.bin" ] ; then
    PATH="$HOME/node_modules/.bin:$PATH"
fi

然后在vim中使用一次:%!js-beautify -f - --type html

推荐阅读