как HTML в моей IDE и HTML в chrome dev tools при проверке могут отличаться

#javascript #html #css #google-chrome-devtools

#javascript #HTML #css #google-chrome-devtools

Вопрос:

Я изменил html-код в своей IDE, но когда я проверяю тот же html с помощью chrome dev tools, я вижу совершенно другую высоту и ширину, а также CSS, которого нигде не видно в моей IDE. Я не писал никаких CSS, связанных с этим HTML. Как он может самогенерироваться здесь изображение выделенного кода самогенерируется

вот код из 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>
 

Комментарии:

1. Библиотека js, которую вы используете (предполагая chartjs), более чем вероятно, скорректировала свойства холста в соответствии с его потребностями

Ответ №1:

Код не имеет тенденции к самогенерации.

По моему опыту, когда код IDE не соответствует коду браузера, это в основном одно из следующих:

  • Я забыл запустить сервер npm / development.
  • Что-то кэшируется и должно быть очищено.

Комментарии:

1. или ChartJS инициализирует холст с размером по умолчанию