2nd/10_Wiki/Topic_Programming/Frontend/Chrome.md

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-chrome	Chrome	10_Wiki/Topics	verified	self	Google Chrome Chromium	none	A	0.9	applied	browser chromium devtools frontend web-platform		2026-05-10	pending	language framework JavaScript V8 / Blink

Chrome

매 한 줄

"매 web platform 의 de-facto reference engine". Chrome 은 Blink rendering + V8 JS + multi-process architecture 의 매 dominant browser (2026 ~65% global share). 매 web standard 의 첫 ship 자, DevTools 의 industry-standard 디버깅 환경, Chromium 의 매 Edge / Brave / Arc / Opera 의 기반.

매 핵심

매 architecture

• Multi-process: browser, renderer (per site), GPU, network, utility — sandbox isolation
• Site Isolation: each site → separate process (Spectre 방어)
• Blink: rendering engine (WebKit fork)
• V8: JS engine (TurboFan, Maglev, Sparkplug, Ignition tiers)
• Skia: 2D graphics
• Mojo: IPC

매 DevTools panel

• Elements: DOM + CSS inspect, computed, layout
• Console: REPL, log, error
• Sources: debugger, breakpoint, snippet
• Network: request waterfall, throttling
• Performance: flame chart, FPS, layout shift
• Application: storage, service worker, cache, manifest
• Lighthouse: audit (perf, a11y, SEO, PWA)
• Recorder: user flow capture + replay

매 key feature (2026)

• WebGPU (stable)
• View Transitions API
• Speculation Rules (prerender)
• Origin Trials (experimental opt-in)
• Built-in Gemini Nano (on-device LLM)
• WebAssembly GC + Tail Call

매 응용

1. Web 앱 dev (DevTools).
2. Extension dev (MV3).
3. Headless automation (Puppeteer, Playwright).
4. Performance profiling (Lighthouse CI).
5. PWA distribution.

💻 패턴

DevTools console snippet

// 모든 image lazy 의 강제
$$('img').forEach(img => img.loading = 'lazy');

// Performance mark
performance.mark('start');
// ... work
performance.mark('end');
performance.measure('work', 'start', 'end');
console.table(performance.getEntriesByName('work'));

Lighthouse CI

# .github/workflows/lighthouse.yml
- uses: treosh/lighthouse-ci-action@v12
  with:
    urls: |
      https://example.com/
      https://example.com/about
    uploadArtifacts: true
    temporaryPublicStorage: true

Puppeteer (headless)

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({ headless: 'new' });
const page = await browser.newPage();
await page.goto('https://example.com');
const title = await page.title();
await page.screenshot({ path: 'shot.png', fullPage: true });
await browser.close();

Extension (MV3) — Service Worker

// manifest.json
{
  "manifest_version": 3,
  "name": "Tab Counter",
  "version": "1.0",
  "permissions": ["tabs", "storage"],
  "action": { "default_popup": "popup.html" },
  "background": { "service_worker": "sw.js" }
}

// sw.js
chrome.tabs.onCreated.addListener(async () => {
  const tabs = await chrome.tabs.query({});
  await chrome.action.setBadgeText({ text: String(tabs.length) });
});

Speculation Rules (prerender)

<script type="speculationrules">
{
  "prerender": [{
    "where": { "href_matches": "/products/*" },
    "eagerness": "moderate"
  }]
}
</script>

chrome:// internals (debug)

chrome://inspect            — devtools for remote / node
chrome://flags              — experimental feature toggle
chrome://net-internals      — network event log
chrome://gpu                — GPU + WebGPU status
chrome://tracing            — perfetto trace
chrome://version            — V8 / Blink version

CDP (Chrome DevTools Protocol)

import CDP from 'chrome-remote-interface';

const client = await CDP();
const { Network, Page } = client;
await Network.enable();
await Page.enable();
Network.requestWillBeSent((params) => console.log(params.request.url));
await Page.navigate({ url: 'https://example.com' });

매 결정 기준

상황	Approach
Web app dev	DevTools (Elements, Network, Performance)
Perf audit	Lighthouse / Lighthouse CI
E2E test	Playwright (Chrome / Firefox / WebKit)
Scraping / automation	Puppeteer (Chromium native)
Cross-browser test	Playwright + BrowserStack
Privacy-focused user	Brave / Firefox

기본값: Chrome stable + Lighthouse CI + Playwright.

🔗 Graph

• 부모: Chromium
• 변형: Arc
• 응용: Lighthouse
• Adjacent: V8 · Blink

🤖 LLM 활용

언제: DevTools workflow, extension scaffolding, headless automation 의 generation. 언제 X: 매 cross-browser compat 매 critical (Firefox / Safari 의 also test).

❌ 안티패턴

• Chrome-only 가정: vendor-prefixed -webkit- API 의 의존 — 매 standard 의 사용.
• Manifest V2: deprecated — 매 MV3 + service worker.
• DevTools throttling 의 무시: prod 의 slow 3G 시 불상.
• console.log 의 prod ship: bundle bloat + privacy — 매 strip plugin.

🧪 검증 / 중복

• Verified (Chrome Developers docs, Chromium source, web.dev).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — Chrome architecture + DevTools + MV3 + 2026 features