Tryb bez interfejsu graficznego w Chrome

Mathias Bynens
Peter Kvitek
Peter Kvitek

W trybie bez interfejsu graficznego Chrome można uruchomić przeglądarkę w środowisku nienadzorowanym, bez widocznego interfejsu użytkownika. W podstawie możesz uruchomić Chrome bez chrome.

Tryb bez interfejsu jest popularnym wyborem do automatyzacji przeglądarki za pomocą takich projektów jak Puppeteer czy ChromeDriver.

Korzystanie z trybu bez interfejsu graficznego

Aby korzystać z trybu bez interfejsu graficznego, prześlij flagę wiersza poleceń --headless:

chrome --headless

Używaj starego trybu bez interfejsu graficznego

Wcześniej tryb bez interfejsu graficznego był oddzielną, alternatywną implementacją przeglądarki, która była dostarczana jako część tego samego pliku binarnego Chrome. Nie udostępnia żadnego kodu przeglądarki Chrome w //chrome.

Chrome ma teraz zjednolicone tryby bez interfejsu graficznego i z interfejsem.

Tryb bez interfejsu graficznego korzysta z kodu Chrome.

Obecnie stary tryb bez interfejsu graficznego jest nadal dostępny w przypadku:

chrome --headless=old

W Puppeteer

Aby korzystać z trybu bez interfejsu graficznego w Puppeteer:

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({
  headless: 'true', // (default) enables Headless
  // `headless: 'old'` enables old 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ć trybu bez interfejsu graficznego w Selenium-WebDriver:

const driver = await env
  .builder()
  .setChromeOptions(options.addArguments('--headless'))
  .build();

await driver.get('https://developer.chrome.com/');

// …

await driver.quit();

Więcej informacji, w tym przykłady użycia innych języków, znajdziesz w poście na blogu zespołu Selenium.

Flagi wiersza poleceń

W trybie bez głowicy dostępne są te flagi wiersza poleceń.

--dump-dom

Flaga --dump-dom wyprowadza na wyjście do standardowego (stdout) serializowany DOM strony docelowej. Na przykład:

chrome --headless --dump-dom https://developer.chrome.com/

Jest to inne działanie niż drukowanie kodu źródłowego HTML, które można wykonać za pomocą curl. Aby wygenerować dane wyjściowe funkcji --dump-dom, Chrome najpierw przeanalizuje kod HTML, przekształcając go w model DOM, a następnie wykona wszystkie instrukcje <script>, które mogą zmienić model DOM, a potem przekształci ten model z powrotem w zserializowany ciąg znaków HTML.

--screenshot

Flaga --screenshot robi zrzut ekranu strony docelowej i zapisuje go jako screenshot.png w bieżącym katalogu roboczym. Jest to szczególnie przydatne w połączeniu z opcją --window-size.

Na przykład:

chrome --headless --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 bieżącym katalogu roboczym. Na przykład:

chrome --headless --print-to-pdf https://developer.chrome.com/

Opcjonalnie możesz dodać flagę --no-pdf-header-footer, aby pominąć nagłówek (z bieżącą datą i godziną) oraz stopkę (z adresem URL i numerem strony) w wersji drukowanej.

chrome --headless --print-to-pdf --no-pdf-header-footer https://developer.chrome.com/

Uwaga: funkcja obsługiwana przez flagę --no-pdf-header-footer była wcześniej dostępna za pomocą flagi --print-to-pdf-no-header. Jeśli używasz poprzedniej wersji, być może trzeba będzie wrócić do starej nazwy flagi.

--timeout

Flaga --timeout określa maksymalny czas oczekiwania (w milisekundach), po którym zawartość strony jest przechwytywana przez --dump-dom, --screenshot i --print-to-pdf, nawet jeśli strona nadal się wczytuje.

chrome --headless --print-to-pdf --timeout=5000 https://developer.chrome.com/

Flaga --timeout=5000 informuje Chrome, aby czekał maksymalnie 5 sekund przed wydrukowaniem pliku PDF. W związku z tym proces ten trwa najwyżej 5 sekund.

--virtual-time-budget

--virtual-time-budget działa jak „przewijanie do przodu” w przypadku kodu zależnego od czasu (np. setTimeout/setInterval). Wymusza na przeglądarce jak najszybsze wykonanie dowolnego kodu strony, sprawiając przy tym, że strona „myśli”, że czas płynie normalnie.

Aby zilustrować jego użycie, rozważ ten demonstracyjny przykład, który co sekundę zwiększa, rejestruje i wyświetla licznik 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 1 sekundzie strona zawiera „1”, po 2 sekundach – „2” itd. Aby zarejestrować stan strony po 42 sekundach i zapisać go jako plik PDF:

chrome --headless --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 adresów URL chrome://. Ta flaga jest dostępna od Chrome 123. Oto przykład:

chrome --headless --print-to-pdf --allow-chrome-scheme-url chrome://gpu

Debugowanie

Ponieważ Chrome jest w trybie bez interfejsu niewidoczny, rozwiązanie problemu może wydawać się trudne. Można debugować Chrome bez interfejsu graficznego w sposób bardzo podobny do interfejsu graficznego.

Uruchom Chrome w trybie bez interfejsu graficznego za pomocą flagi wiersza poleceń --remote-debugging-port.

chrome --headless --remote-debugging-port=0 https://developer.chrome.com/

To polecenie wypisuje na wyjście standardowe unikalny adres URL WebSocket, na przykład:

DevTools listening on ws://127.0.0.1:60926/devtools/browser/b4bd6eaa-b7c8-4319-8212-225097472fd9

W pełnej wersji Chrome możemy następnie użyć debugowania zdalnego w Narzędziach deweloperskich Chrome, aby połączyć się z obiektem bez interfejsu graficznego i go sprawdzić.

  1. Otwórz chrome://inspect i kliknij przycisk Skonfiguruj….
  2. Wpisz adres IP i numer portu z adresu URL WebSocket.
    • W poprzednim przykładzie wpisałem 127.0.0.1:60926.
  3. Kliknij Gotowe. Powinien pojawić się element docelowy zdalny ze wszystkimi kartami i innymi elementami docelowymi.
  4. Kliknij Zbadaj, aby uzyskać dostęp do Narzędzi deweloperskich w Chrome i zbadać zdalny bezgłowy cel, w tym podgląd na żywo strony.

Narzędzia deweloperskie w Chrome mogą sprawdzać zdalną stronę docelową bez interfejsu graficznego

Prześlij opinię

Chętnie poznamy Twoją opinię na temat trybu bez interfejsu graficznego. Jeśli napotkasz jakieś problemy, zgłoś błąd.