4. 폰트패밀리에서 우선순위를 확인합니다. 가장 앞단에 있는 폰트가 1순위로 보이는 폰트이고 문제가 있을시 그다음 순서로 이어집니다. 폰트를 하나씩 삭제해가면서 체크해보는 것도 방법입니다.
원본 파일 가져가기
어떤 이미지의 속성을 확인하고 싶거나 이미지의 원본 파일을 가져가고 싶을 때 사용하기 유용한 방법입니다.
➊ 엘리먼츠를 선택합니다.
➋ 해당 이미지가 svg로 만들어진 것을 확인합니다.
➌ 이미지 링크에서 오른쪽 마우스 클릭. Open in new tab을 선택합니다.
➍ 이미지 새로운 창에서 이미지가 열리는 걸 확인할 수 있습니다. 다시 오른쪽 마우스를 클릭. 다름 이름으로 저장을 선택합니다.
말줄임 기능 확인하기
텍스트가 길어지면 말줄임 처리하는 경우가 종종 있습니다.
다음은 말줄임 기능이 제대로 구현되는지 확인하는 방법입니다.
브레이크 포인트 확인하기
반응형 웹의 브레이크 포인트가 제대로 작동하는지 확인해보겠습니다.
➊ 마우스를 페이지뷰와 개발자도구 사이에 놓고 양옆으로 옮기면서 변하는 사이즈를 확인합니다.
➋ 735px 미만에서 페이지 레이아웃이 바뀌는 것으로 브레이크 포인트를 확인할 수 있습니다.
CSS 추가
디자인 테스트를 하다 보면, 기존에 없던 CSS 값을 추가하고 싶은 순간이 생깁니다.
해당 태그를 참조하는 css값을 만들어서 임시로 추가할 수 있습니다.
CSS 가져오기
괜찮은 웹사이트를 발견하면 특정 엘리먼츠의 스타일 속성을 가져와서 내 디자인에 적용하고 싶은 순간이 있을 겁니다.
예시로 애플 홈페이지 GNB에 쓰인 스타일 속성을 라이트브레인 GNB에 넣어보도록 하겠습니다.
➊ 검사도구로 애플 GNB 백그라운드를 클릭합니다.
➋ Styles패널에서 background와 backdrop-filter
내용을 복사합니다.
➌ 검사도구로 라이트브레인 GNB 백그라운드를 클릭합니다.
➍ Styles패널에서 background속성을 확인합니다.
➎ 애플에서 가져온 CSS속성을 붙여넣기 합니다.
➏ 라이트브레인 GNB 백그라운드 속성값이 변한것을 확인합니다.
이처럼 적용하고 싶은 속성이 있으면 참고할 웹사이트에서 복사+붙여넣기를 해가며 디자인 테스트를 해볼 수 있습니다.
더불어 개발자에게 의견을 전달할 때도 더욱 정확한 코드를 사용하여 소통할 수 있을 것입니다.
Hover값 변경하기
호버값은 검사도구로 클릭해도 한 번에 CSS가 나오지 않습니다.
Hover에 들어간 CSS 값을 변경하는 방법에 관해 이야기 하도록 하겠습니다.
스크린샷
크롬에서도 페이지에 대한 스크린샷을 할 수 있습니다.
'그냥 시스템 스크린샷을 사용하면되는가?'라는 의문을 가질 수 있지만 크롬에서 제공하는 스크린샷은 웹 사이트의 전체를 캡쳐하거나 선택한 요소에 대해서만 스크린샷을 사용하는 것이 가능합니다.
또한 매우 고화질의 이미지를 얻을 수 있습니다.
우측 상단의 더보기 아이콘을 클릭하면 Run command 항목을 찾을 수 있습니다.
단축키로는 간단하게 ctrl + shift + P를 사용하면 됩니다.
그럼 크롬 개발자 도구가 가지는 다양한 기능을 볼 수 있습니다.
우리는 여기서 스크린샷을 해보겠습니다.
screenshot을 입력합니다.
Capture area screenshot : 웹 사이트 안에서 내가 임의로 지정한 영역에 대해서 캡쳐합니다.
Capture full size screenshot : 페이지 전체의 스크린샷을 저장합니다.
Capture node screenshot : 엘리먼트 선택 기능을 통해 해당 노드만을 캡쳐합니다.
Capture screenshot : 현재 화면에 보이는 영역 전체를 캡쳐합니다.
임의로 요소 이동시키기
특정 엘리먼트를 마우스로 이동시켜 재배치할 수 있습니다.
태그를 선택하고 개발자 도구에서 마우스로 드래그 이동 시키면 간단하게 요소 위치를 변경할 수 있습니다.
요소를 숨기기
개발을 하다보면 특정 요소를 확인하기 위해서 주변 요소를 숨겨야하는 경우가 있습니다.
이 때 코드에 주석을 하는 것이 아닌 개발자 도구를 통해 빠르게 숨기는 방법이 있습니다.
해당 태그를 개발자 도구에서 클릭하고 H 키를 누르기만 하면 요소가 숨겨집니다.
다시 H 키를 누르면 다시 나타나게 됩니다.
네트워크 탭
XHR (XML HTTP Request 객체)
개발자 도구의 Network 탭을 열어 봅시다. 상위 탭에서 Network를 선택합니다.
그리고 구글에 아무거나 검색해 홈페이지를 갱신해 봅시다.
이 Network 탭에서는 XHR(XMLHttpRequest)를 포함해 JS, CSS, IMG등의 정적 파일까지 로드가 잘 되고 있는지에 대한 정보가 나옵니다.
여기서 XHR은 AJAX 요청을 생성하는 JavaScript API입니다.
프론트엔드단에서 Rest API를 호출하는 AJAX 요청을 했다면 이 XHR이 생성되게 될 것입니다.
XHR 탭을 따로 클릭해 보겠습니다.
구글에서 검색 기능을 사용했기 때문에, 검색어에 해당하는 검색 결과가 나오는 API가 호출되었을 것입니다.
그 외 기타 구글에서 연동해 놓은 Rest API에 대해 나옵니다. Status가 200이니 서버가 요청을 정상적으로 처리했다는 뜻입니다.
이들을 하나하나 클릭해 보면 Header, Response, 걸린 시간 등등 다양한 정보를 직접 확인할 수 있습니다.
어떻게 보면 Postman보다도 더 강력한 기능을 제공하기도 합니다.
이 Network 탭의 기능을 사용하면 직접 만들고 있는 Rest API에 대해 더 효율적으로 오류의 원인을 분석하고 개선할 수 있습니다.
어떠한 이유로 서버에서 블락당했고, 서버에서 어떤 Response를 내놓았으며, 어떤 서버 코드로 오류가 발생했는 지 알 수 있으니까요.
자, 이제 직접 사용해 봅시다.
하나의 Form이 있고, 이 Form을 작성한 후 작성 내용에 따라 POST 요청을 한다고 가정해 봅시다.
(하나의 예일 뿐, Rest API를 연동하는 단이라면 어디서든 사용 가능합니다)
홈페이지에 추가한 이 임시로 만든 폼에, 임시로 만든 Rest API를 연동해 보도록 하겠습니다.
주의할 점은 Rest API를 연동하기 전에 미리 Network 탭을 열어 놔야 한다는 것입니다.
이제 폼을 작성하고 POST 요청을 하는 API를 사용하였는데 서버 단에서 오류가 났다고 가정해 봅시다.
서버 쪽에서 수정을 하고, 저장을 했지만 수정된 결과를 확인하고 싶어도 이미 오류가 발생하여 작동이 중지된 상태입니다.
원인을 찾아보니 서버 코드가 잘못되어서 서버에서 에러를 뱉었다는 가정을 해 봅시다.
이럴 경우 폼이 초기화되기 때문에 다시 작성하고 다시 POST 요청을 넣어야 할 것입니다.
이 과정이 반복되면(서버에서 코드 수정이 잦아지면) 매우 귀찮은 작업이 될 것입니다.
이럴때는 Replay XHR라는 기능을 사용하면 됩니다.
아까 Network 탭에서 XHR 목록을 확인할 수 있다고 했죠?
이 Replay XHR을 사용하면 아까 HTTP 요청을 한 것을 그대로 다시 요청해 줍니다.
굳이 폼에 다시 작성할 필요 없이, 아까 폼에 작성한 내용을 바탕으로 다시 요청을 할 수 있게 됩니다.
이러면 불필요하게 다시 폼을 작성할 필요가 없겠죠?
심지어 백엔드 코드를 수정하고 다시 이 회원가입 페이지로 이동해야 하는 것 까지 고려하면 너무 비효율적이죠.
이럴땐 이 Replace XHR을 사용합시다.
매순간 렌더링 화면 확인하기
화면이 로딩될 때 화면의 로딩 시간이 매우 긴 경우(예를 들어 10초 가량) 사용자는 페이지가 로드되는 동안 깨지고 아직 로드되고 있는 화면을 볼 것 입니다.
우리는 그 로딩 타임을 줄일 수 없다면 그 동안 화면에 어떤 일이 펼쳐지는지 확인하고 그에 대해 대응해야할 것입니다.
개발자 도구의 Network 탭에서 Capture screenshots를 선택한 뒤 리로드(cmd + R)합니다.
그럼 우리가 눈으로 직접 확인 할 수 없을 만큼의 짧은 시간 단위로 쪼개어 화면을 캡쳐할 수 있습니다.
이에 따라 로딩 중 나타나는 화면 모두를 눈으로 확인 할 수 있습니다.
Console 탭
콘솔의 마지막 실행 결과 참조 = $_
콘솔을 하다보면 순차적인 기능, 메소드를 확인해야 할 때가 있었습니다.
하지만 이걸 편하게 해주는 $_ 명령어가 있습니다.
그동안은 메소드 결과를 변수에 추가한 후에 순차적인 작업을 진행했습니다.
코드로 간단히 살펴보겠습니다.
'12345'를 한 글자씩 분리한 다음 역순으로 조립하고 다시 join 하는 코드입니다.
개발자 도구 콘솔 창에 찍어보면 바로 결과가 '54321'로 나와버리죠.
근데 개발을 하다 보면 3가지 메소드 ( split, reverse, join )의 결과물을 각각 보고 싶을 때가 있습니다.
이때 쓰는 기능이 $_입니다.
$_ -> 마지막 실행 결과물을 참조하는 임시 변수입니다.
결과물이 보이시나요? $_를 입력했더니 마지막 실행 결과를 가져옵니다.
이를 이용해서 다음과 같은 편리함을 사용할 수 있습니다.
객체를 쉽게 파악하게 해주는 명령어 = table
responseData 객체의 값을 보시죠.
dimesionGroup과 measure가 있는 건 알겠는데 한눈에 파악하기가 어렵습니다.
하지만 명령어 table를 사용하면 좀 더 직관적인 결과를 얻을 수 있습니다.
변수를 클립보드로 복사하는 명령어 = copy
만일 객체 값 전체를 복사하고 싶을떄, 해당 영역을 드래그하고 ctrl+v하면 문자열만 복사됩니다.
그래서 우측 마우스 클릭을 하고 copy object를 하면 객체가 복사되게 됩니다.
또한 문법 copy(object)를 하게 되면 제 컴퓨터의 클립보드에 값이 복사되고 ctrl+v, 붙여 넣기를 통해 원하는 곳에 사용할 수 있습니다.
자바스크립트 console 문법
콘솔창에서 쓸수 있는 다양한 console 디버그 문법을 소개합니다.
[JS] 📚 console.log 및 다양한 콘솔 명령어 정리
자바스크립트 개발을 할 때 console.log 많이들 쓰시죠 console.log를 debugger보다도 많이 쓰는 편입니다. console 객체에는 log 메서드 말고도, 다양한 메서드들이 많이 존재합니다. 콘솔창을 이쁘게 한