F12

1 키보드의 버튼

키보드 글쇠(표준 두벌식/QWERTY)
Esc F1 F2 F3 F4#s-3 F5 F6 F7 F8 F9 F10 F11 F12
~
`
!
1
@
2
\#
3
$
4
%
5
^
6
&
7
*
8
(
9
)
0
[[_]]
-
+
=
Backspace
(Delete)
Tab Q W E R T Y U I O P [[{]]
[[[]]
[[}]]
\]
\
\\ ()
Caps Lock A S D F G H J K L [[:]]
;
"
'
Enter
(Return)
Shift Z X C V B N M [[<]]
,
[[>]]
[[.]]
?
/
⇧ Shift
Ctrl Fn Win
(Command ⌘)
Alt
(Option ⌥)
한자 Space 한/영 Alt
(Option)
Win
(Command ⌘)
Menu Ctrl
PrtSc/
SysRq
ScrLk Pause/
Break
Ins Del Home End PgUp PgDn Num

F12는 키보드 맨 위쪽의 기능 키(Function key)들 중 12번 째로 가장 마지막에 있는 기능 키이며 이걸 누르면 개발자 도구 창이 생긴다. 웹사이트 HTML 에디터라고도 한다. 이것을 이용하여 웹 페이지를 디버그 하거나 테스트, 속도를 향상 시킬 수도 있다. 또 검사할 수 있는 페이지 요소를 선택하여 수정할 수도 있는데 이는 웹 페이지를 개발할 때 어떻게 변경되는지 확인하기 위한 기능일 뿐이므로 페이지 자체를 수정하는 기능은 아니며, 따라서 새로고침을 하면 원래대로 돌아온다. 이 기능을 여론 조작, 루머 조장 등에 악용한 사례도 있다. 개발자 도구창은 각각의 브라우저마다 조금씩 모습이 다른지만 기능은 비슷하다.

x400px
F12키 개발자 도구를 이용한 페이지 요소 수정의 예 (...) 용모찌잉
새로고침을 하면 기존의 모습으로 돌아간다. 심심할 때 유용하다

한글과컴퓨터를 하는 중 이 키를 누르면 한컴 사전이 열린다.

2 F12 개발자 도구의 형태 및 종류

다음은 각 웹 브라우저에서의 개발자 도구이다.

x500px
IE 브라우저에서의 F12 개발자 도구.

height350
구글 크롬 브라우저에서의 F12 개발자 도구. 비발디 브라우저 의 개발자 도구창도 크롬 브라우저의 개발자 도구창과 너무 많이 비슷하다.

height350
모질라 파이어폭스 브라우저에서의 F12 개발자 도구. 한글만세

3 F12 개발자 도구의 기능

개발자 도구창의 기능은 위에서 언급했듯이 각 브라우저마다 조금씩 다를 수 있으나 크게 차이가 나는 기능은 없으며 웹 브라우저 중 하나인
IE11의 개발자 도구를 기준으로 Microsoft에서 소개한 기능의 종류는 다음과 같다. [출처 - Microsoft F12 개발자 도구 사용]

  • DOM 탐색기 도구(Ctrl+1) - 브라우저에서 렌더링되는 웹 페이지의 구조를 보여 주고 라이브 페이지에서 HTML 및 스타일을 편집할 수 있다.
  • 콘솔 도구(Ctrl+2) - 코드 실행, 콘솔의 명령줄을 사용하여 정보 보내기 및 콘솔 디버깅 API를 사용하여 정보 가져오기를 조작할 수 있다.
  • 디버거 도구(Ctrl+3) - 코드에서 수행하는 작업, 작업을 수행하는 시간 및 방법을 검사할 수 있다.
  • 네트워크 도구(Ctrl+4) - 웹 페이지 로드 및 작업과 관련된 모든 네트워크 요청의 세부 정보를 제공한다.
  • UI 응답성 도구(Ctrl+5) - 페이지 속도가 느려질 때 수행 중인 작업을 확인하는 데 도움을 준다.
  • 프로파일러 도구(Ctrl+6) - JavaScript 속도 측정으로, 프로파일링 세션 중에 호출된 함수, 호출된 횟수와 완료하는 데 걸린 시간을 보여 준다.
  • 메모리 도구(Ctrl+7) - 웹 페이지의 메모리 사용을 추적하며 메모리 사용이 증가하는 위치, 증가 이유 및 해결 방법을 식별하는 데 도움을 준다.
  • 에뮬레이션 도구(Ctrl+8) - 다양한 화면 크기 및 하드웨어 기능에서 웹 페이지가 실행되는 방식 및 다양한 사용자 에이전트 문자열에 응답하는 방식을 테스트하는 데 도움이 된다.

4 추가 바람

F12의 다른 기능 및 각 도구에 대한 기능과 세부사항 등 자세한 내용은 추가 바람.
F12에게 관심을 주세요 위키백과에도 F12 항목은 따로 없는듯 하다 (...)