CODEWITHSUNDEEP
javascripthtmlcssgoogle-chrome-devtools
Pravablo
Pravablo

Reputation: 43

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

I changed html code in my IDE but when I inspect the same html by chrome dev tools I see totally different height and width as well as CSS which is nowhere to be seen in my IDE. I did not write any CSS related to that HTML. How can it self-generate here the image of the code which is highlighted is self-generated

here is the code from 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>

Upvotes: 0

Views: 120

Answers (1)

anpel
anpel

Reputation: 941

Code does not tend to self generate.

In my experience, when the IDE code does not match the browser code it is mostly one of the following:

  • I forgot to start npm / development server.
  • Something is cached and needs to be cleared.

Upvotes: 1

Related Questions