[News] (New) Chrome DevTools - AI assistance Panel

Chrome Devtools 내에 AI assistance 패널이 등장했다.
(위 기능은 정식 출시되지 않은 실험적인 기능이므로 참고하길 바란다.)

공식 문서

---

 

AI Assistance Panel

필요 조건

• Chrome v131 이상 버전
• DevTools 설정(Win: F12 / Mac: Option + Command + i) > 기본 설정 > 언어에서 영어(미국) 선택.
• DevTools 설정 > AI 혁신 Toggle On

1. Devtools-Settings-Preferences -Language: English(U.S) 선택 2. 언어 설정 후 Settings를 닫으면 Devtools를 새로고침해야한다고 상단에 메시지가뜰텐데 클릭해서 새로고침 3. Devtools-Settings-AI innovations ToggleSwitch On

 

제공 기능

1. Styling (스타일링)

• DOM 트리의 요소들에 대해 질문 가능
• 특정 요소가 왜 그렇게 표시되는지 설명
• 요소들 간의 상호작용 방식 파악
• 스타일링 문제에 대한 해결책 제공

사용 예시

Elements 탭에서 좌측 정렬되어있는 특정 요소를 클릭한 후에 중앙 정렬을 부탁해봤다.

1. 개발자도구의 요소 선택을 이용해 요소 클릭

2. AI assistacne에서 바뀔 요소에 대한 설명을 해주고 Continue 버튼을 클릭하면, 요청한 대로 스타일을 고쳐준다.

3. 요청했던 요소 스타일링 변경에 대한 결과물

2. Network requests (네트워크 요청)

• 페이지에서 발생하는 모든 네트워크 요청 분석
• 요청의 출처 파악
• 요청 소요 시간 분석
• 실패한 요청의 원인 파악

사용 예시

Network 탭에서 contentscript.js 분석을 부탁해봤다.

1. 분석하고 싶은 파일에 커서를 올리면 채팅이 가능한 것 같은 icon이 뜨고, 클릭하면 아래 AI assistance 탭에 파일이 추가된다.

2. 요청할 내용을 입력하면 해당 파일의 내용을 분석해서 알려준다.

3. Sources (소스)

• 웹 페이지에 로드된 파일들에 대한 질문 가능
• 파일의 내용 분석
• 각 파일의 목적과 역할 이해
• 코드 관련 문제 해결

사용 예시

• Sources 탭에서 contentscript.js 분석을 부탁해봤다.
  (결과는 Network 탭에서 2번째 사진과 같이, AI assistance가 파일을 분석해준다)

1. 분석하고 싶은 파일에 커서를 올리면 채팅이 가능한 것 같은 icon이 뜨고, 클릭하면 아래 AI assistance 탭에 파일이 추가된다.

4. Performance (성능)

• Performance 패널에서 기록된 성능 프로파일 분석
• 성능 관련 활동 모니터링
• 성능 개선을 위한 제안사항 제공
• 병목 현상 파악 및 최적화 방안 제시

사용 예시

• Performance 탭에서 Record 후 Annotation 탭을 클릭하고, 메모를 달아봤다.

Record 했다는 가정 하에, Annotations 탭 클릭

1. 블록 선택시 메모 가능

2. 링크 연결이 필요한 요소들을 연결할 수 있음

3. Shift 클릭후 드래그하면 해당 블록이 범위로 잡혀, 메모할 수 있음 + Save Trace시 해당 Annotation을 저장

4. 저장한 json파일 로드하면 3에서 적었던 annotation 정보가 그대로 들어있다.

Trace.json 구조

궁금해서 열어본 json에는 메타데이터에 작성했던 annotation과 관련 정보들이 담겨있다.

{"metadata": {
  "source": "DevTools",
  "startTime": "2025-01-16T07:40:23.132Z",
  "cpuThrottling": 1,
  "networkThrottling": "No throttling",
  "hardwareConcurrency": 16,
  "dataOrigin": "TraceEvents",
  "modifications": {
    "entriesModifications": {
      "hiddenEntries": [],
      "expandableEntries": []
    },
    "initialBreadcrumb": {
      "window": {
        "min": 28467808765,
        "max": 28476003305,
        "range": 8194540
      },
      "child": null
    },
    "annotations": {
      "entryLabels": [
        {
          "entry": "s-84596",
          "label": "Optimize Required"
        }
      ],
      "labelledTimeRanges": [
        {
          "bounds": {
            "min": 28468403630,
            "max": 28468583761,
            "range": 180131
          },
          "label": "Here is the tree."
        }
      ],
      "linksBetweenEntries": [
        {
          "entryFrom": "r-4589",
          "entryTo": "s-68316"
        }
      ]
    }
  }
},
"traceEvents": [
  {"args":{"name":"swapper"},"cat":"__metadata","name":"thread_name","ph":"M","pid":0,"tid":0,"ts":0},
  {"args":{"name":"CrRendererMain"},"cat":"__metadata","name":"thread_name","ph":"M","pid":18020,"tid":29500,"ts":0},
  {"args":{"name":"CrRendererMain"},"cat":"__metadata","name":"thread_name","ph":"M","pid":12472,"tid":35536,"ts":0},
  {"args":{"name":"CrBrowserMain"},"cat":"__metadata","name":"thread_name","ph":"M","pid":17656,"tid":29428,"ts":0},
  {"args":{"name":"Compositor"},"cat":"__metadata","name":"thread_name","ph":"M","pid":12472,"tid":10588,"ts":0},
  {"args":{"name":"CrGpuMain"},"cat":"__metadata","name":"thread_name","ph":"M","pid":32124,"tid":7020,"ts":0},
  {"args":{"name":"ThreadPoolServiceThread"},"cat":"__metadata","name":"thread_name","ph":"M","pid":32124,"tid":30584,"ts":0},
  {"args":{"name":"VizCompositorThread"},"cat":"__metadata","name":"thread_name","ph":"M","pid":32124,"tid":17576,"ts":0},
  {"args":{"name":"CompositorTileWorker1"},"cat":"__metadata","name":"thread_name","ph":"M","pid":17656,"tid":20320,"ts":0},
  {"args":{"name":"Chrome_ChildIOThread"},"cat":"__metadata","name":"thread_name","ph":"M","pid":12472,"tid":33048,"ts":0},
  {"args":{"name":"Chrome_IOThread"},"cat":"__metadata","name":"thread_name","ph":"M","pid":17656,"tid":28512,"ts":0},
  {"args":{"name":"Chrome_ChildIOThread"},"cat":"__metadata","name":"thread_name","ph":"M","pid":32124,"tid":8720,"ts":0},
  {"args":{"name":"GpuVSyncThread"},"cat":"__metadata","name":"thread_name","ph":"M","pid":32124,"tid":30800,"ts":0},
  {"args":{"name":"ThreadPoolServiceThread"},"cat":"__metadata","name":"thread_name","ph":"M","pid":17656,"tid":29472,"ts":0},
  {"args":{"name":"ThreadPoolForegroundWorker"},"cat":"__metadata","name":"thread_name","ph":"M","pid":12472,"tid":21488,"ts":0},
  {"args":{"name":"ThreadPoolForegroundWorker"},"cat":"__metadata","name":"thread_name","ph":"M","pid":12472,"tid":33864,"ts":0},
  {"args":{"name":"ThreadPoolForegroundWorker"},"cat":"__metadata","name":"thread_name","ph":"M","pid":12472,"tid":12460,"ts":0},
  {"args":{"name":"ThreadPoolServiceThread"},"cat":"__metadata","name":"thread_name","ph":"M","pid":12472,"tid":29464,"ts":0},
  {"args":{"name":"ThreadPoolForegroundWorker"},"cat":"__metadata","name":"thread_name","ph":"M","pid":12472,"tid":24960,"ts":0},
  {"args":{"name":"Font thread"},"cat":"__metadata","name":"thread_name","ph":"M","pid":12472,"tid":27444,"ts":0},
  {"args":{"name":"Window owner thread"},"cat":"__metadata","name":"thread_name","ph":"M","pid":32124,"tid":27688,"ts":0},
  {"args":{"name":"Chrome_DevToolsADBThread"},"cat":"__metadata","name":"thread_name","ph":"M","pid":17656,"tid":28544,"ts":0},
  {"args":{"name":"MemoryInfra"},"cat":"__metadata","name":"thread_name","ph":"M","pid":17656,"tid":14064,"ts":0},
  {"args":{"name":"ThreadPoolForegroundWorker"},"cat":"__metadata","name":"thread_name","ph":"M","pid":12472,"tid":34972,"ts":0},
   ... // 2-30만 줄의 timeline
  {"args":{},"cat":"devtools.timeline","id2":{"local":"0x1c2"},"name":"AnimationFrame","ph":"e","pid":18020,"tid":29500,"ts":28475988703}
]}

참고

소개 영상

https://youtu.be/kzDUe-f4gac

 

(선택사항) DevToolsGenAiSettings

설정을 마쳤다면,  chrome://policy/ 내에는 DevToolsGenAiSettings 라는 정책이 있을텐데,

여기 설정된 값에 따라 AI 기능 사용여부와 자료 수집여부를 설정할 수 있다.

(0: AI기능 O + 자료수집 O / 1: AI기능 O + 자료수집 X / 2: AI기능 X + 자료수집 X)

필자의 경우 1로 설정해두었다.

---

결론

개발자도구에서 ai(제미나이가 내장되어있다고 한다)를 활용할 수 있게됨으로써,

네트워크 요청(Network), 소스(Sources) , 성능(Performance) 쪽에서는 DX가 굉장히 좋아질 것 같은 느낌이 든다.

특히 성능은 annotation을 저장하고 로드할 수 있다는 점에서, 협업할 때 빛을 발할 것 같다.