W 2017 r. w Chrome 59 wprowadziliśmy tryb bez interfejsu graficznego, umożliwiają uruchamianie przeglądarki w środowisku nienadzorowanym bez widocznego interfejsu użytkownika. Możesz używać Chrome bez Chrome.
Tryb bez interfejsu graficznego jest często stosowany w automatyzacji przeglądarek w takich projektach jak: Puppeteer lub ChromeDriver. Oto przykład tworzenia pliku PDF w minimalistycznym trybie wiersza poleceń przy użyciu trybu bez interfejsu graficznego danego adresu URL:
chrome --headless --print-to-pdf https://developer.chrome.com/
Jak działa bez interfejsu graficznego
Zanim omówimy, jak działa interfejs bez interfejsu graficznego, warto zrozumieć, jak
„stary” Bez interfejsu graficznego działa. Poprzedni fragment kodu wiersza poleceń używa pola --headless
flagi wiersza poleceń, co sugeruje, że bez interfejsu graficznego jest tylko tryb działania interfejsu
w zwykłej przeglądarce Chrome. Co zaskakujące, w rzeczywistości nie było to prawdą.
Stary model bez interfejsu graficznego
osobnej implementacji alternatywnej przeglądarki
które trafiały w ramach tego samego pliku binarnego Chrome. Nie udostępnia
wszystkie fragmenty kodu przeglądarki Chrome
//chrome
Wdrożenie i obsługa osobnej przeglądarki bez interfejsu graficznego wiąże się z wieloma wyzwaniami. za pracochłonność. A ponieważ technologia bez interfejsu graficznego była miała własne błędy i funkcje, które nie były dostępne w Chrome. Spowodowało to zamieszanie podczas automatycznych testów przeglądarki, które mogły w trybie HUD, ale występuje błąd w trybie bez interfejsu graficznego lub na odwrót.
Firma wykluczyła też wszystkie automatyczne testy, które polegały na przeglądarce. instalacji rozszerzenia. To samo dotyczy innych funkcji na poziomie przeglądarki, jeśli interfejs Headless nie miał osobnej implementacji, nie był on obsługiwany.
Zespół Chrome ujednolicił tryby bez interfejsu graficznego i tryb interfejsu graficznego.
Nowy tryb bez interfejsu graficznego jest dostępny w Chrome 112. W tym trybie Chrome tworzy: ale nie wyświetla żadnych okien platformy. Wszystkie pozostałe funkcje, istniejące są dostępne bez ograniczeń.
Korzystanie z trybu bez interfejsu graficznego
Aby użyć nowego trybu bez interfejsu graficznego, przekaż flagę wiersza poleceń --headless=new:
chrome --headless=new
Na razie stary tryb bez interfejsu graficznego jest nadal dostępny w przypadku:
chrome --headless=old
W Puppeteer
Aby włączyć nowy tryb bez interfejsu graficznego w Puppeteer:
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch({
headless: 'new',
// `headless: true` (default) enables old Headless;
// `headless: 'new'` enables new Headless;
// `headless: false` enables "headful" mode.
});
const page = await browser.newPage();
await page.goto('https://developer.chrome.com/');
// …
await browser.close();
W Selenium-WebDriver
Aby użyć nowego trybu bez interfejsu graficznego w Selenium-WebDriver:
const driver = await env
.builder()
.setChromeOptions(options.addArguments('--headless=new'))
.build();
await driver.get('https://developer.chrome.com/');
// …
await driver.quit();
Więcej informacji, w tym przykłady zastosowania innych wiązań językowych, znajdziesz w poście na blogu zespołu Sellenium.
Flagi wiersza poleceń
W nowym trybie bez interfejsu graficznego dostępne są następujące flagi wiersza poleceń.
--dump-dom
Flaga --dump-dom wyświetla zserializowany DOM strony docelowej do stdout.
Na przykład:
chrome --headless=new --dump-dom https://developer.chrome.com/
Różni się to od drukowania kodu źródłowego HTML, którego można użyć
curl Aby wyświetlić wynik działania --dump-dom, Chrome najpierw analizuje kod HTML
do DOM, wykonuje wszystkie polecenia <script>, które mogą zmieniać DOM, a następnie
przekształca ten DOM z powrotem w zserializowany ciąg kodu HTML.
--screenshot
Flaga --screenshot powoduje wykonanie zrzutu ekranu strony docelowej i zapisanie go jako
screenshot.png w bieżącym katalogu roboczym. Jest to szczególnie przydatne w przypadku:
w połączeniu z flagą --window-size.
Na przykład:
chrome --headless=new --screenshot --window-size=412,892 https://developer.chrome.com/
--print-to-pdf
Flaga --print-to-pdf zapisuje stronę docelową jako plik PDF o nazwie output.pdf w
w bieżącym katalogu roboczym. Na przykład:
chrome --headless=new --print-to-pdf https://developer.chrome.com/
Opcjonalnie możesz dodać flagę --no-pdf-header-footer, aby pominąć wydruk
nagłówek (z bieżącą datą i godziną) i stopkę (z adresem URL i stroną),
).
chrome --headless=new --print-to-pdf --no-pdf-header-footer https://developer.chrome.com/
Nie: funkcja dostępna za flagą --no-pdf-header-footer była wcześniej dostępna
dostępny z flagą --print-to-pdf-no-header. Może być konieczne użycie
starą nazwę flagi, jeśli jest używana poprzednia wersja.
--timeout
Flaga --timeout określa maksymalny czas oczekiwania (w milisekundach), po którym
zawartość strony jest przechwytywana przez narzędzia --dump-dom, --screenshot oraz
--print-to-pdf, nawet jeśli strona nadal się wczytuje.
chrome --headless=new --print-to-pdf --timeout=5000 https://developer.chrome.com/
Flaga --timeout=5000 informuje Chrome, że musi poczekać do 5 sekund przed rozpoczęciem drukowania
plik PDF. Z tego powodu ten proces może potrwać maksymalnie 5 sekund.
--virtual-time-budget
Element --virtual-time-budget umożliwia „przejście do przodu” dla dowolnego kodu zależnego od czasu
(np. setTimeout/setInterval). Wymusza wykonanie przez przeglądarkę
kodu strony, jednocześnie dbając o to, aby strona uważała,
która tak naprawdę upływa.
Aby zilustrować zastosowanie tej funkcji, spójrz na tę wersję demonstracyjną,
przyrosty, dzienniki i wyświetlenie licznika co sekundę
za pomocą funkcji setTimeout(fn, 1000). Oto odpowiedni kod:
<output>0</output>
<script>
const element = document.querySelector('output');
let counter = 0;
setInterval(() => {
counter++;
console.log(counter);
element.textContent = counter;
}, 1_000);
</script>
Po sekundzie strona zawiera wartość „1”; po dwóch sekundach, „2” itd. Aby zapisać stan strony po 42 sekundach i zapisać ją jako plik PDF:
chrome --headless=new --print-to-pdf --virtual-time-budget=42000 https://mathiasbynens.be/demo/time
--allow-chrome-scheme-url
Flaga --allow-chrome-scheme-url jest wymagana, aby uzyskać dostęp do chrome:// adresów URL.
Ta flaga jest dostępna od wersji Chrome 123. Oto przykład:
chrome --headless=new --print-to-pdf --allow-chrome-scheme-url chrome://gpu
Debugowanie
Chrome jest niewidoczny w trybie bez interfejsu graficznego, więc może brzmieć trudno aby rozwiązać problem. Można debugować Chrome bez interfejsu graficznego w sposób, przypominające upiorny Chrome.
Uruchom Chrome w trybie bez interfejsu graficznego, używając
Flaga wiersza poleceń --remote-debugging-port.
chrome --headless=new --remote-debugging-port=0 https://developer.chrome.com/
Powoduje to wydrukowanie unikalnego adresu URL WebSocket na potrzeby protokołu stdout, na przykład:
DevTools listening on ws://127.0.0.1:60926/devtools/browser/b4bd6eaa-b7c8-4319-8212-225097472fd9
W przejrzystej instancji Chrome możemy następnie użyć funkcji Zdalne debugowanie w Narzędziach deweloperskich w Chrome, aby nawiązać połączenie do celu bez interfejsu graficznego i je sprawdzić.
- Przejdź na stronę
chrome://inspecti kliknij przycisk Konfiguruj.... - Wpisz adres IP i numer portu z adresu URL WebSocket.
- W poprzednim przykładzie mam wpisany ciąg
127.0.0.1:60926.
- W poprzednim przykładzie mam wpisany ciąg
- Kliknij Gotowe. Powinny być widoczne wszystkie karty i cel zdalny. inne cele na liście.
- Kliknij inspekcja, aby otworzyć Narzędzia deweloperskie w Chrome i sprawdzić pilota. Cel bez interfejsu graficznego, z podglądem na żywo strony.
Prześlij opinię
Chętnie poznamy Twoją opinię na temat nowego trybu bez interfejsu graficznego. Jeśli napotkanych problemów, zgłoś błąd.