如何从Lighthouse检索页面HTML？

Question

我正在尝试向Lighthouse添加一些自定义指标。为了进行一些基本检查，我需要获取网页的原始HTML。

我尝试使用driver.sendCommand（DOM.getDocument或DOM.getFlattenedDocument），driver.querySelectorAll('html')和driver.evaluateAsync('document.documentElement.outerHTML')都没有成功。 我如何设法将原始HTML从Chrome浏览器导入Lighthouse中？

谢谢

Fabio

Answer 1

这应该是召集者直接调用<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-header"> Card header </div> <div class="card-body"> <div class="row"> <div class="col"> <!-- full-width column for message box --> <div class="container-fluid" style="overflow-y: auto; overflow-x: hidden"> <!-- start of messages box --> <div class="row"> <!-- message block --> <div class="col-xs-1"> <div style="height: 40px; width: 40px; border-radius: 100%; background-color: black"></div> </div> <div class="col"> <h5 class="text-danger float-left">Username</h5> <small class="text-muted float-right">timestamp</small> <div class="clearfix"></div> <div> This is a single message </div> <div> This is another single message </div> </div> <hr class="w-100"> </div> <div class="row"> <div class="col-xs-1"> <div style="height: 40px; width: 40px; border-radius: 100%; background-color: black"></div> </div> <div class="col"> <h5 class="text-danger float-left">Username 2</h5> <small class="text-muted float-right">timestamp</small> <div class="clearfix"></div> <div> This is a third message </div> <div> ASNDJKASJDAJDKLAJLADSAJLKASDJLAKSJDKLSAJDLKAJKALDJKLJDLADJLASJDLKSAJDASJDLASDASDASDASDASA </div> </div> <hr class="w-100"> </div> <div class="row"> <!-- message block --> <div class="col-xs-1"> <div style="height: 40px; width: 40px; border-radius: 100%; background-color: black"></div> </div> <div class="col"> <h5 class="text-danger float-left">Username</h5> <small class="text-muted float-right">timestamp</small> <div class="clearfix"></div> <div> This is a single message </div> <div> This is another single message </div> </div> <hr class="w-100"> </div> </div> <!-- end messages box --> </div> <div class="col-2 d-none d-lg-block"> Users bar, gets pushed under first column before disappearing when one of messages is too long </div> </div> </div> </div> </div> </div> </div>。像这样：

driver.evaluateAsync

在收集器的const expression = `document.querySelector('html').outerHTML`; const html = await passContext.driver.evaluateAsync(expression); 内应该可以获取html。 HTML w/o Javascript执行此操作。修改该收集器中的表达式以了解其工作方式。

这是一个非常粗糙的示例，它记录了从不使用Javascript的HTML进行黑客入侵而收集到的html