Con la modalità headless di Chrome puoi eseguire il browser in un ambiente inattivo, senza UI visibile. Essenzialmente, puoi eseguire Chrome senza Chrome.
La modalità headless è una scelta popolare per l'automazione del browser, attraverso progetti come Puppeteer o ChromeDriver.
Usa la modalità headless
Per utilizzare la modalità headless, passa il flag della riga di comando --headless:
chrome --headless
Usa la vecchia modalità headless
In precedenza, la modalità headless era
un'implementazione separata del browser
che è stato fornito come parte dello stesso file binario di Chrome. Non ha condiviso
qualsiasi codice del browser Chrome
//chrome
Ora Chrome ha modalità headless e headful unificate.
Per il momento, la vecchia modalità headless è ancora disponibile con:
chrome --headless=old
In un burattinaio
Per usare la modalità headless in 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();
In Selenium-WebDriver
Per utilizzare la modalità headless in Selenium-WebDriver:
const driver = await env
.builder()
.setChromeOptions(options.addArguments('--headless'))
.build();
await driver.get('https://developer.chrome.com/');
// …
await driver.quit();
Consulta il post del blog del team di Selenium per ulteriori informazioni, inclusi esempi che utilizzano associazioni di altre lingue.
Flag della riga di comando
I seguenti flag della riga di comando sono disponibili in modalità headless.
--dump-dom
Il flag --dump-dom stampa il DOM serializzato della pagina di destinazione su stdout.
Ad esempio:
chrome --headless --dump-dom https://developer.chrome.com/
Questa operazione è diversa dalla stampa del codice sorgente HTML, che puoi utilizzare con
curl. Per fornirti l'output di --dump-dom, Chrome prima analizza il codice HTML
in un DOM, esegue qualsiasi elemento <script> che potrebbe alterare il DOM,
trasforma quel DOM in una stringa serializzata di HTML.
--screenshot
Il flag --screenshot acquisisce uno screenshot della pagina di destinazione e lo salva come
screenshot.png nella directory di lavoro attuale. Ciò è particolarmente utile
combinato con il flag --window-size.
Ad esempio:
chrome --headless --screenshot --window-size=412,892 https://developer.chrome.com/
--print-to-pdf
Il flag --print-to-pdf salva la pagina di destinazione come PDF denominato output.pdf in
nell'attuale directory di lavoro. Ad esempio:
chrome --headless --print-to-pdf https://developer.chrome.com/
Se vuoi, puoi aggiungere il flag --no-pdf-header-footer per omettere la stampa
intestazione (con la data e ora correnti) e piè di pagina (con l'URL e la pagina
).
chrome --headless --print-to-pdf --no-pdf-header-footer https://developer.chrome.com/
No: la funzionalità dietro il flag --no-pdf-header-footer era in precedenza
disponibili con il flag --print-to-pdf-no-header. Potresti dover ricorrere
il vecchio nome del flag, se utilizzi una versione precedente.
--timeout
Il flag --timeout definisce il tempo di attesa massimo (in millisecondi) dopodiché
i contenuti della pagina vengono acquisiti da --dump-dom, --screenshot e
--print-to-pdf anche se la pagina è ancora in fase di caricamento.
chrome --headless --print-to-pdf --timeout=5000 https://developer.chrome.com/
Il flag --timeout=5000 indica a Chrome di attendere fino a 5 secondi prima di stampare
il PDF. Pertanto, l'esecuzione di questo processo richiede al massimo 5 secondi.
--virtual-time-budget
Il --virtual-time-budget funge da "avanzamento veloce" per qualsiasi codice dipendente dal tempo
(ad es. setTimeout/setInterval). Obbliga il browser a eseguire qualsiasi
del codice della pagina il più velocemente possibile, facendo credere alla pagina che
che passa effettivamente il tempo.
Per illustrarne l'utilizzo, consideriamo questa demo,
incrementa, registra e visualizza un contatore al secondo
utilizzando setTimeout(fn, 1000). Ecco il codice pertinente:
<output>0</output>
<script>
const element = document.querySelector('output');
let counter = 0;
setInterval(() => {
counter++;
console.log(counter);
element.textContent = counter;
}, 1_000);
</script>
Dopo un secondo, la pagina contiene "1"; dopo due secondi, "2" e così via. Ecco come acquisire lo stato della pagina dopo 42 secondi e salvarlo come PDF:
chrome --headless --print-to-pdf --virtual-time-budget=42000 https://mathiasbynens.be/demo/time
--allow-chrome-scheme-url
Per accedere a chrome:// URL è necessario il flag --allow-chrome-scheme-url.
Questo flag è disponibile a partire dalla versione 123 di Chrome. Ecco un esempio:
chrome --headless --print-to-pdf --allow-chrome-scheme-url chrome://gpu
Debug
Poiché Chrome è effettivamente invisibile in modalità headless, potrebbe sembrare difficile per risolvere un problema. È possibile eseguire il debug di Chrome headless in un modo molto in modo simile a Chrome headful.
Avvia Chrome in modalità headless con il
Flag della riga di comando --remote-debugging-port.
chrome --headless --remote-debugging-port=0 https://developer.chrome.com/
Viene stampato un URL WebSocket univoco allo stdout, ad esempio:
DevTools listening on ws://127.0.0.1:60926/devtools/browser/b4bd6eaa-b7c8-4319-8212-225097472fd9
In un'istanza "headful" di Chrome, possiamo utilizzare Debug remoto di Chrome DevTools per connetterti al target headless e lo ispeziona.
- Vai a
chrome://inspecte fai clic sul pulsante Configura.... - Inserisci l'indirizzo IP e il numero di porta dall'URL WebSocket.
- Nell'esempio precedente, ho inserito
127.0.0.1:60926.
- Nell'esempio precedente, ho inserito
- Fai clic su Fine. Dovresti vedere un oggetto target remoto con tutte le sue schede e altri obiettivi elencati.
- Fai clic su inspect per accedere a Chrome DevTools e ispezionare il telecomando Target headless, inclusa una visualizzazione in tempo reale della pagina.
Feedback
Non vediamo l'ora di ricevere il tuo feedback sulla modalità headless. Se problemi, segnala un bug.