Fingerprint Suite: Create and Inspect a Consistent Browser Environment

A browser setup can become inconsistent even when every individual option looks deliberate: HTTP reports one User-Agent, JavaScript another, or language headers conflict with generated attributes.

This tutorial connects Fingerprint Suite to Playwright and writes an observation report. Its purpose is configuration diagnosis, not detector scoring or a promise of invisibility.

Install both roles and the browser

Use Node.js 24:

mkdir browser-environment
cd browser-environment
npm init -y
npm install fingerprint-generator@2.1.89 fingerprint-injector@2.1.89 playwright
npx playwright install chromium

The generator creates related attributes and headers; the injector applies them to a browser context. Generating JSON alone does not alter a browser. See the official suite.

Generate once, inject, and observe

Create inspect_environment.mts:

import { writeFile } from 'node:fs/promises';
import { chromium } from 'playwright';
import { FingerprintGenerator } from 'fingerprint-generator';
import { newInjectedContext } from 'fingerprint-injector';
 
const generator = new FingerprintGenerator({
    devices: ['desktop'],
    operatingSystems: ['linux'],
    browsers: [{ name: 'chrome' }],
});
const generated = generator.getFingerprint();
const browser = await chromium.launch({ headless: true });
 
try {
    const context = await newInjectedContext(browser, {
        fingerprint: generated,
    });
    const page = await context.newPage();
    const response = await page.goto('https://httpbin.org/headers');
    if (!response || response.status() !== 200) {
        throw new Error('HTTP 回显请求失败');
    }
    const echo = await response.json();
    const headers = Object.fromEntries(
        Object.entries(echo.headers).map(([name, value]) => [
            name.toLowerCase(), String(value),
        ]),
    );
    const observed = await page.evaluate(() => ({
        userAgent: navigator.userAgent,
        language: navigator.language,
        languages: [...navigator.languages],
        viewport: { width: innerWidth, height: innerHeight },
        screen: { width: screen.width, height: screen.height },
    }));
    const expected = {
        userAgent: generated.fingerprint.navigator.userAgent,
        acceptLanguage: generated.headers['accept-language'],
        screen: generated.fingerprint.screen,
    };
    const differences: string[] = [];
    if (headers['user-agent'] !== expected.userAgent) {
        differences.push('HTTP User-Agent 与生成值不一致');
    }
    if (observed.userAgent !== expected.userAgent) {
        differences.push('JavaScript User-Agent 与生成值不一致');
    }
    if (headers['accept-language'] !== expected.acceptLanguage) {
        differences.push('HTTP Accept-Language 与生成值不一致');
    }
    const headerLanguage = headers['accept-language']?.split(',')[0].split(';')[0];
    if (headerLanguage?.toLowerCase() !== observed.language.toLowerCase()) {
        differences.push('请求头首选语言与页面语言不一致');
    }
    const report = { expected, request_headers: headers, observed, differences };
    await writeFile('environment.json', JSON.stringify(report, null, 2));
    console.log({ differences });
    await context.close();
} finally {
    await browser.close();
}

Run:

node inspect_environment.mts

One generated object is reused for context creation and expected values. Generating twice would introduce unrelated random differences.

The example uses a public header echo. An internal replacement should report what the destination actually received, not merely the client's intended headers. Intermediate gateways can change values.

Read three layers of evidence

The report stores generated expectations, destination-observed request headers, and page-observed JavaScript values. Its differences array applies only the rules shown.

An empty array does not establish complete fingerprint consistency, realistic hardware, target acceptance, or TLS behavior. It only describes these observations on this request.

Screen and viewport dimensions also represent different concepts. They should not be forced equal simply because both have width and height fields.

Introduce and repair a controlled conflict

As a local modification, add the following beside fingerprint: generated:

newContextOptions: {
    extraHTTPHeaders: { 'accept-language': 'zz-ZZ' },
}

The language value is intentionally artificial. Inspect whether the report identifies disagreement with generated and page values.

Repair by removing the conflicting override or generating a coherent configuration from the actual language requirement. Editing one reported string does not repair the browser layers.

User-Agent and viewport context options can also override generated values. Establish which component owns each setting before adding another configuration source.

Integrate with existing automation

The example chooses Chromium with desktop Linux Chrome constraints. A different host engine needs a deliberate combination rather than a claim that generated attributes make every engine equivalent.

Create and use pages in the returned injected context. A new page created through an unrelated context does not observe the same configuration.

No proxy or geographic routing is configured here. Exit location, language, time zone, and site-market selection are distinct conditions.

Troubleshoot

Generated values change but the page does not: check context ownership and injection timing. Printing a fingerprint does not apply it.

HTTP and JavaScript UAs differ: inspect header overrides, context options, intermediaries, and mixed contexts. Change one source at a time and record all layers.

Languages disagree: reconcile generator constraints, locale, and Accept-Language according to the actual requirement.

An upgrade breaks option types: check both package versions and the host API rather than copying private fields.

A site still challenges the browser: this report does not establish the cause of external access decisions. Inspect the actual response and conditions.

Reports differ every run: preserve the same generated object for a controlled configuration comparison.

Connecting generation, context creation, network observation, and page observation makes configuration changes explainable.