检查时，我的 IDE 中的 HTML 和 chrome 开发工具中的 HTML 有何不同

Question

我更改了 IDE 中的 html 代码，但是当我通过 chrome 开发工具检查相同的 html 时，我看到完全不同的高度和宽度以及 CSS 这在我的 IDE 中是看不到的。我没有写任何与 HTML 相关的 CSS。怎么自生成这里高亮的代码图片是自生成的

这是来自 IDE

的代码

 <div class="page-content page-container" id="page-content">
                            <div class="padding">
                                <div class="row">
                                        <div class="col-lg-6">
                                            <div class="card">
                                                <div class="card-header">Pie chart</div>
                                                <div class="card-body" style="height: 400px">
                                                    <div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
                                                        <div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                                                            <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
                                                        </div>
                                                        <div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                                                            <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
                                                        </div>
                                                    </div> 
                                                    
                                                    <canvas id="chart-line" width="399" height="400" class="chartjs-render-monitor" style="display: block; width: 240px; height: 290px;"></canvas>
                                                </div>
                                            </div>
                                        </div>

Answer 1

代码不会自行生成。

根据我的经验，当 IDE 代码与浏览器代码不匹配时，主要是以下情况之一：

我忘了启动 npm / 开发服务器。
某些内容已缓存，需要清除。

检查时，我的 IDE 中的 HTML 和 chrome 开发工具中的 HTML 有何不同

how can the HTML in my IDE and HTML in chrome dev tools when inspected differ

html

javascript

css

google-chrome-devtools