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

---
id: wiki-2026-0508-chrome
title: Chrome
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Google Chrome, Chromium]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [browser, chromium, devtools, frontend, web-platform]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: JavaScript
  framework: 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
```js
// 모든 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
```yaml
# .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)
```ts
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
```json
// manifest.json
{
  "manifest_version": 3,
  "name": "Tab Counter",
  "version": "1.0",
  "permissions": ["tabs", "storage"],
  "action": { "default_popup": "popup.html" },
  "background": { "service_worker": "sw.js" }
}
```

```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)
```html
<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)
```ts
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 |