- 상위 항목 : 키보드
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 개발자 도구의 형태 및 종류
다음은 각 웹 브라우저에서의 개발자 도구이다.
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 항목은 따로 없는듯 하다 (...)