Fatal编程技术网
  • javascript/
  • Javascript 可视化网站的html源代码，在JS处理后，保持正确的缩进

Javascript 可视化网站的html源代码，在JS处理后，保持正确的缩进

javascript html browser

Javascript 可视化网站的html源代码，在JS处理后，保持正确的缩进,javascript,html,browser,indentation,Javascript,Html,Browser,Indentation,我试图深入研究一个复杂的网站，它使用JS处理其组件。 firefox上的Inspector工具很棒，但在某些情况下，我更喜欢将纯html源代码转储到本地文本文件中，并使用我最喜欢的文本编辑器。 在我的示例中，使用Ctrl+U页面源代码工具为我提供了页面的前JS html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name=&q

我试图深入研究一个复杂的网站，它使用
JS
处理其组件。 firefox上的
Inspector工具
很棒，但在某些情况下，我更喜欢将纯
html
源代码转储到本地文本文件中，并使用我最喜欢的文本编辑器。 在我的示例中，使用
Ctrl+U
页面源代码工具为我提供了页面的前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>
在这种情况下，缩进在4级深度后被破坏，从而使代码变得不清晰

有没有一种方法可以在JS之后复制此
源HTML以保持索引整洁？
结果是
JS处理后的
语法可能会始终在线显示。
在这种情况下，您可以将此文本格式化为更易于管理的格式，在我的情况下，我使用我最喜欢的
文本编辑器
vim，并使用我必须使用的linux（假设您已经安装了
nodejs
）
在vim中安装以下插件


NeoBundle 'Chiel92/vim-autoformat'


安装js美化


sudo npm install js-beautify


确保在添加以下行的路径上设置了nodejs binary packages目录


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美化-f---键入html


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