'크롬 개발자도구'에 해당되는 글 7건

안녕하세요. 제임스 입니다. 

앞서 개발자도구를 이용한 스타일 편집에 대한 간략한 내용 설명 했었는데요. 

이번에는 스타일 편집 시 Color 값을 변경 하는 팁에 대해 알려 드리겠습니다. 

Color Format 을 변경하는 방법에 대해 먼저 알아 보겠습니다. 

원하는 요소를 선택 시 Syle 창에 위와 같이 color 값이 표기 됩니다. 

개발 시 어떤 color format 을 사용했느냐에 따라 표기 방식이 달라지는데요. 위 예제의 경우 Hex Color Code 를 사용 하여 색상을 표기하고 있습니다. 

첫번째 이미지의 색상표기 박스(정식 명칭은 Color Picker 입니다)를 키보드의 shift 키를 누른채 마우스 좌클릭 시 Color Format 이 변경되는데, 위와 같이 RGB Color Format 을 사용하여 표기 할 수 있습니다. 

또는 HSL Color Format 을 사용할 수도 있습니다. 

위와 같은 방법을 이용하여 좀더 편한 Color Format 을 이용하여 색상을 변경 적용 해볼수 있습니다. 

Color Picker 를 이용하여 원하는 색상 직접 선택 가능합니다. 즉, 색상 코드 표를 찾을 필요 없이 원하는 색상에 가까운 색을 직접 보고 찾을 수 있습니다. 

Color Picker 를 클릭 시 위와 같이 색상값을 선택 할 수 있는 팝업이 올라 오게 됩니다. 

거의 대부분 어떤 용도로 사용 하는지 유추가 가능하니 몇가지만 설명 드리겠습니다. 

1. Eyedropper 버튼을 클릭하여 Eyedropper 를 활성화 합니다. 현재 페이지 화면상으로 마우스를 이동하여 원하는 부위를 지정하고 마우스 클릭 시 붉은 색으로 표시된 지점의 색상값으로 설정이 됩니다. 

2. 현재 색상 값을 HEX, RGBA 또는 HSL 방식으로 표기 해주며 우측 화살표를 클릭 시 Color Format 을 변경 가능합니다. 

3. 현재 선택 된 색상을 시각적으로 표현한 부분입니다. 

이 Color Picker 를 이용하여 간편하게 원하는 색상을 지정해 볼 수 있습니다. 

개발자 도구를 이용한 색상 변경하기 정말 쉽죠? ^^

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

크롬 개발자 도구를 사용하면서 자주 사용하는 것중 몇 가지를 언급하려고 합니다. 

바로 로드된 페이지 소스 수정 및 스타일 편집으로 현 페이지의 변경 사항을 미리 확인 하는 방법입니다. 

아래 이미지와 같이 Elements 패널을 이용하게 됩니다. 

물론 크롬 개발자도구에서 수정했다고 수정 내용이 지속적으로 반영되는 것은 아닙니다. 

화면이 리로드 되는 경우 개발자도구에서 수정한 내용은 사라지게 됩니다. 

화면을 리로드 하지 않는다면 원하는 소스 코드 추가 및 스타일 적용등을 통해 미리 적용될 화면을 확인 할 수 있는 아주 좋은 방법입니다. (페이지를 리로드 해도 변경 내용이 지속되도록 할 수 있는 방법이 있으나 이는 추후 언급 하도록 하겠습니다 - 일반적인 경우 화면 리로드 시 기 반영코드는 사라집니다)

DOM node 또는 텍스트등의 실시간 편집 하려면 수정하고자 하는 요소 또는 텍스트를 더블 클릭하여 수정하고자 하는 영역을 선택 후 원하는 값으로 변경 하면 됩니다. 

네이버 뉴스 목록 중 하나른 선택 하여 우측 Elements 패널에서 텍스트를 선택 하였습니다. 

그리고 위와 같이 "크롬 개발자 도구 페이지 편집" 이라는 문구로 변경후 엔터키를 치면 네이버 홈페이지 뉴스 홈의 세번째 기사 제목이 바뀐 것을 확인 할 수 있습니다 (다시 언급하지만 이는 로컬에서만 변경 된것으로 리로드 시 해당 페이지에서 제공하고 있는 원 소스가 로드 되므로 수정한 내용은 사라지게 됩니다)

스타일 실시간 편집은 Style 창에서 스타일 속성 이름과 값을 변경 하면 됩니다. 

위와 같이 컬러 값이 지정된 스타일을 아래와 같이 변경 했습니다.

실제 네이버 홈페이지에서 방문한 목록을 회색처리 하는 스타일인데요. 

제가 방문했던 목록의 색을 변경하여 아래과 같이 변경 해봤습니다. 

위와 같은 방법으로 스타일을 얼마든지 변경해 볼 수 있습니다. 화면 리로드 시 당연히 적용한 내용은 삭제 됩니다 :)

박스 모델 매개변수 검사 및 편집은 Computed 창을 통해서 진행 할 수 있습니다. 선택한 영역을 박스 형으로 표현하여 주며 각 영역의 margin 또는 padding 값등등 해당 영역를 표현하기 위해 적용된 값들을 박스 모양으로 표현해 줍니다. 

박스 내의 숫자 영역을 클릭 하여 값을 변경 할 수 있습니다. 

위 이미지는 아래 이미지의 붉은색 박스가 처져있는 부분을 나타내고 있습니다. 

박스 모델 매개변수를 변경해 보겠습니다. 

padding 부분의 top 및 bottom 영역을 각각 10 > 50, 11 > 50 으로 변경 했습니다. 

결과는 보시는 바와 같이 padding top 및 padding bottom 값이 늘어나 보입니다. 

많이 사용하게 되는 기능들이므로 잘 봐두셨다가 유용하게 사용 하시길 바라며...

재차 강조 하지만 Elements 패널에서 수정한 내용들은 화면이 리로드 되는 순간 원 소스로 복구 됩니다. 즉, 개발자 도구상에서 적용하는 스크립트, 코드, 스타일 등은 실제 소스에 아무런 영향을 미치지 못합니다. 

화면이 리로드 되어도 개발자 도구 상에서 지속적으로 적용된 모습을 확인하는 방법이 있지만, 이는 다음 기회에 포스팅 하도록 하겠습니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

크롬 브라우저를 사용 하여 모바일 웹 개발을 할 경우 아쉬운 점이 몇 가지 있습니다.

그중 한가지가 실제 단말이 아니기 때문에 센서 및 위치정보를 사용 할 수 없다는 것 입니다. 특히 웹에서도 위치정보를 이용한 서비스를 많이 하고 있는 상황에서 정말 아쉬운 부분이 아닐수 없습니다. 

크롬 개발자도구에서는 이런 개발자들의 고충을 조금이라도 덜어주기 위해??? 위치정보 및 가속도계 센서 에뮬레이트를 할 수 있도록 지원 하고 있습니다. 

지금 부터 어떻게 사용 하는지 알아 보도록 하겠습니다. 

위치정보 및 센서 에뮬레이트 설정화면 이동은 크롬 개발자도구 설정 > More tools > Sensors 를 순차 적으로 클릭하여 Sensors 탭을 오픈합니다. 

목록에서 Sensors 를 선택 합니다. 

붉은 색 박스가 위치정보 데이터를 지정하는 화면입니다. 

아래 푸른색 박스는 가속도계 에뮬레이트 (기기방향)을 지정하는 화면입니다. 

위치정보 데이터를 설정하는 방법에 대해 알아 보겠습니다. 

No override: 위치정보 데이터를 사용하지 않음 상태 입니다. 

Drop Down List 를 클릭하여 프리셋 되어 있는 위치 정보 중 하나인 런던을 선택해 봅니다. 

정확하게 런던의 어디인지는 모르지만 대략적인 런던 어딘가의 위치정보가 설정됩니다. 

아쉽게도 한국의 위치정보는 프리셋 데이터에 없습니다. 

그래서 Custom Location 을 선택하여 임의로 위치정보를 지정해 주는 방법으로 사용 할 수 있습니다. 

위 입력 정보는 명동역 (4호선)의 대략적인 위치정보 입니다. 

이 위치정보는 많이 사용하게 되실 겁니다. 고객 위치정보 기반 서비스를 제공하는 경우라면 거의 필수적으로 알고 계셔야 할 기능입니다. 

물론 몰라도 개발 할 수 있습니다.

단말기 들고 밖으로 돌아 다니면서요... ㅎㅎ;;

가속도계 에뮬레이트 (기기방향) 설정하는 방법에 대해 알아 보겠습니다. 

Orientation 항목이 Off 로 되어 있습니다. 방향 설정을 사용하지 않는다는 의미 입니다. 

기기방향을 나타내는 값은 아래와 같이 세가지가 있습니다. 

α (알파) - z 축 기준 회전

β (브라보) - 좌우 기준 기울기

γ (감마) - 앞뒤 기준 기울기

Drop Down List 를 클릭하여 프리셋 되어 있는 정보 중 Portrait 를 선택 해보겠습니다. 

β 값이 90(도) 가 되어 이미지 처럼 서 있는 모습이 됩니다. 

프리셋 정보 외 임의의 값을 입력 해볼 수 있습니다. 

Reset 키를 눌러 이전 설정으로 돌아 갈 수 있습니다. 

특별한 경우가 아니라면 가속도계 에뮬레이트를 사용 하실 일은 거의 없습니다. 하지만 아예 없는 건 아니니 알고 있다가 필요 할 경우 사용 하면 좋겠죠? ^^

다른건 몰라도 위치정보 데이터 설정 하는 방법은 꼭 기억해서 요긴하게 사용하시길 바랍니다 :)

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

모바일 웹 개발을 할 경우 모바일 단말별 특성에 맞게 개발 및 테스트를 진행 해야 하는데요. 

이때 도움이 되는 것이 바로 크롬 개발자도구의 뷰포트 컨트롤을 이용 하는 것입니다. 

이 뷰포트 컨트롤을 이용하여 반응형 및 특정 기기별 특성을 에뮬레이트 할 수 있습니다. 

뷰포트 컨트롤 이용하여 기기 선택, 화면 크기 및 화면 비율, 온/오프라인 설정 화면 가로모드/세로모드 설정을 할 수 있습니다.   

위 이미지에서 붉은 색으로 표기된 영역이 바로 Device 드롭다운 메뉴입니다.

뷰포트 컨트롤에서는 Responsive (반응형) 또는 각각의 특정 기기를 지정하는 기기별 모드를 선택 할 수 있습니다. 

반응형은 뷰포트를 양단하는 선을 클릭하여 화면 크기를 조절하여 뷰포트 크기를 자유자재로 조정할 수 있습니다.

위 이미지의 좌우측 핸들을 드래그 하여 뷰포트 사이즈 조절이 가능합니다. 

사이즈 조절 결과는 단순히 화면 상의 사이즈로만 확인 가능 한 것이 아니라 실제 화면 사이즈를 수치로도 확인 가능합니다. 

(뷰포트 사이즈를 줄여 width 값을 648 px 로 설정)

(뷰포트 사이즈를 늘려 width 값을 1176 px 로 설정)

기기별 모드는 원하는 특정 기기 (아이폰X, 넥서스5, 갤럭시S8 등등)에서 나타는 모습을 완벽하게 재현하고자 할때 사용합니다. 

(기기별 모드에서 iPhone X 를 선택한 모습입니다. )

기기별 모드에는 기본으로 프리셋 되어 제공되며 해당 기기의 특성이 에뮬레이터가 구동 될때 자동으로 구현됩니다. 

기기 프리셋 더보기 위해서는 포트뷰 컨트롤에서 Edit... 를 선택 하여 설정 화면으로 이동 합니다. 

이는 크롬 개발자도구 설정 화면 포스팅 시 언급했던 Settings > Devices > Emulated Devices 화면입니다. 

(뷰포트 컨트롤의 Edit... 를 클릭)

Settings > Devices > Emulated Devices 로 이동한 화면과 동일한 화면에서 프리셋 된 단말 목록을 확인 할 수 있습니다. 원하는 프리셋 단말을 선택 후 셋팅 화면을 종료 하면 뷰포트 컨트롤에 목록이 추가 됩니다. 

단, Device 드롭다운 메뉴에 보여지는 목록 갯수가 10개로 고정되어 있는 것 같습니다. 기존에 보여 지는 안쓰는 단말 정보를 해제 해야 추가한 정보가 보여 집니다. 

사용자설정 기기 프리셋 추가를 통해 지원되는 프리셋 단말 중 필요한 단말의 테스트를 진행 할 수 있습니다. 

Device 드롭다운 메뉴의 Edit... 를 클릭하여 Add custom Device... 버튼을 클릭하거나 

Settings > Devices > Emulated Devices > Add custom device... 버튼을 클릭하여 기기 추가를 할 수 있습니다. 

기기 명, 너비, 높이, 픽셀 비율, 기기 종류 및 User Agent 값을 설정 후 Add를 클릭하여 추가 하고 Device 드롭다운 메뉴에서 이용 할 수 있습니다. 

기기 방향설정은 가로/세로 모드를 바꾸는 토글 버튼을 클릭하여 즉시 적용 가능합니다.  

아래 이미지들은 갤럭시 S5 를 기준으로 방향설정 토클 버튼을 클릭한 결과물입니다. 

(화면 사이즈가 360 x 640 인 Portrait 로 설정)

(화면 사이즈가 640 x 360 인 Landscape 로 설정)

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

크롬 개발자 도구 사용 시 여러가지 유용한 설정들이 있어 소개 하고자 합니다. 

그렇다면 설정 화면 진입 하는 방법 부터 알아야 겠죠? ^^

■ 크롬 개발자도구 설정 (Settings) 열기

1. 개발자 도구의 메뉴버튼 > Settings 

2. 단축키 F1 클릭

1번 또는 2번 방법을 이용하면 아래와 같이 설정(Settings) 화면을 보실 수 있습니다. 

■ Dark 테마 적용하기

개발자 도구의 기본 테마는 Light 로 흰색 배경으로 되어 있습니다. 

이클립스 사용 하시던 분들 중 배경 테마를 Dark 로 설정해서 사용 하시는 분들 많으실 텐데요. 

크롬 개발자 도구에서도 Dark 테마를 선택 할 수 있습니다. 

Settings > Preferences > Appearance > Theme 에서 Dark 를 선택 하시면 됩니다. 

Dark 테마가 적용된 개발자 도구 모습입니다. 멋있죠? 

개발은 폼으로 하는게 아니지만... 그래도 이왕이면 멋있는게 좋죠 ^^

■ 캐싱 사용하지 않기 (Disable Cache)

개발중 정말 귀찮은 일 중 하나가 js 파일등을 적용 시 캐시 때문에 바로 적용이 안되어 인터넷 사용 기록 삭제를 통해 캐시를 지워 주는 일입니다. 일반 사용자의 경우라면 캐싱을 하는 것이 인터넷 사용 환경 상에서 잇점이 많지만 개발자 입장에서는 특별한 경우가 아니라면 캐싱을 할 필요가 거의 없습니다. 

그래서 캐싱을 사용하지 않도록 하는 방법이 있습니다. 

Settings > Preferences > NetWork > Disable cache (while DevTools is open) 

while DevTools is open 이라고 되어 있습니다. 즉, 개발자 도구가 열려 있는 상태에서는 캐싱을 하지 않습니다. 

정말 정말 유용한 기능이고 개발중이라면 특별한 케이스를 제외하고는 꼭 사용 하셔야 하는 기능입니다. 

■ 콘솔패널 타임스탬프 활성화

Console 패널에서 console log 등이 표기 될때 기본은 아래와 같이 시간 정보가 없습니다. 

Console 패널에 로그가 남은 시간 정보를 알고 싶다면 아래와 같이 Console 항목의 Show timestamps 를 선택하면 됩니다. 

Settings > Preferences > Console > Show timestamps 

타임 스탬프를 활성화 하면 위와 같이 로그가 남은 시간을 확인 하실 수 있습니다. 

■ Blackboxing

이 블랙박싱이라는 생소한 이름의 설정은 자바스크립트 디버깅 시 아주 아주 유용한 설정입니다. 

개발 시개발자 개인이 작성한 코드 이외의 외부 라이브러리를 호출 하는 경우가 있습니다. 디버깅 시 이 외부 라이브러리 스택도 찾아 들어가는 작업을 하게 되는데요. 직접 개발한 부분이 아니므로 (신뢰 할 수 있는 라이브러리의 경우 디버깅 하지 않아도 되므로...) 디버깅을 하지 않도록 설정 할 수 있습니다. 

이때 사용 하는 것이 바로 Blackboxing 입니다. 

Settings > Blackboxing > Framework Blackbox Patterns

Add pattern... 버튼을 클릭 합니다. 

외부 라이브러리로 jquery-1.12.4.min.js 파일을 사용하고 있다고 가정 했을때

jqeury 로 시작하는 .js 파일을 블랙박싱 해주겠다는 의미로 위와 같이 입력 후 Add 버튼을 클릭하여 완료 해줍니다. 

Blackbox (블랙박싱) 목록에 jquery 가 보이며 이후 디버깅 시 jqeury 관련 스택은 스킵하게 됩니다. 

Blackbox content scripts 는 항상 체크 해두는게 좋습니다. 

■ Devices (에뮬레이터 단말기 추가 삭제)

Devices 탭에서는 에뮬레이터용 단말기를 추가 삭제 할 수 있습니다. 

여기에 등록된 단말기 정보는 모두 프리셋 된 정보들입니다. 

물론 Add Custom Device 기능을 통해 원하는 단말 설정 및 테스트 에뮬레이터 생성이 가능합니다. 

(이와 관련하여 추후 좀더 자세히 다루도록 하겠습니다.)

Settings > Devices > Emulated Devices

■ Shortcuts (단축키 정보)

크롬 개발자도구에서 사용하는 단축기 정보를 확인 할 수 있습니다. 

많이 사용하는 단축키들은 외우고 있으면 좋겠죠? ^^

Settings > Shortcuts > Shortcuts

설정에서 개인적으로 많이 사용하거나 꼭 필요하다고 생각되는 컨텐츠 위주로 내용을 정리 했습니다. 

웹 개발에 많은 도움이 될것이라 생각 되네요 :)

※ 이 글은 크롬버전 63.0.3239.132 (공식빌드) 기준으로 작성 했습니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

개발자 도구 (DevTools) 를 이용 할 때 Dock 의 위치를 원하는 곳으로 지정 할 수 있습니다. 

어떻게 하는지 방법을 알아 보겠습니다. 

■ Dock 위치 지정하기

DevTools 의 설정버튼 ()을 클릭 시 Dock Side 항목이 표기 됩니다. 

이때 우측 사각형이 칠해져 있는 모양을 선택 시 Dock 이 에뮬레이터 우측에 위치하게 됩니다. 

Dock Side 항목 중 하단 사각형이 칠해진 아이콘을 선택 시 Dock 이 에뮬레이터 아래에 위치 합니다. 

Dock Side 항목 중 좌측 사각형이 칠해져 있는 모양을 선택 시 Dock 이 에뮬레이터 좌측에 위치합니다. 

마지막으로 Dock Side 항목 중 사각형 두개가 겹쳐 진듯한 아이콘을 클릭 시 Dock 과 에뮬레이터가 별개의 윈도우로 분리되어 표시 됩니다. 

개발 하는 화면에 맞게 또는 개발자의 취향이나 편의에 따라 원하는 방식대로 Dock 위치를 지정하여 사용 할 수 있습니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

크롬을 이용하여 웹 개발 시 꼭 필요 한것 중 한가지를 들자면 바로 Chrome DevTools (크롬 개발자 도구) 입니다.

디버깅 도구, 네트워크 상태 체크, 메모리, 보안, 퍼포먼스 체크 및 콘솔 등을 지원하는 강력한 개발 툴입니다. 

오늘은 이 Chrome DevTools 실행하는 방법을 알아 보겠습니다. 

■ Chrome DevTools (개발자 도구) 열기

1. Chrome 메뉴에서 도구 더보기 > 개발자 도구 를 선택하여 활성화 할 수 있습니다. 

Chrome 메뉴 선택 (크롬 브라우저 우측 상단)

도구 더보기 클릭

개발자 도구 선택

2. 마우스 우클릭 > 검사 를 선택하여 활성화 하는 방법

마우스 우클릭 후 검사 선택 

3. 단축키를 사용 하는 방법

Windows --> Ctrl + Shift + I (영문자 아이)

Mac --> Command + Option + I (영문자 아이)

크롬 개발자 도구를 이용하면 개발이 한결 편해 지는 것을 느낄수 있습니다. 

관련 내용은 지속적으로 정리해서 올리겠습니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D