웹 프로그래밍 크롬 브라우저 활용 노하우?
웹 페이지와 관련된 코드를 작성하면서 개인적으로 크롬 브라우저를 활용해 코드를 작성하고 있는 방법에 대해서 몇 가지 작성해 보려고 합니다.
웹에선 기본적으로 사용되는 코드는 html, CSS, Javascript(jQuery), 웹 언어(php,asp,.net,jsp) 등이 있습니다. 웹페이지를 하나 만들려고 해도 다뤄야 할 줄 아는 코드들이 많이 있습니다.
게다가 데이터베이스 쿼리까지 만져야 하다 보니 웹 사이트를 하나 만든다는 건 정말 어려운 일입니다. 혼자서 모든 코드를 마스터하였고 다양한 경우의 수를 경험한다는 건 쉽지 않은 조건이라고 생각 합니다.
그렇게 하다 보니 웹에서는 다양한 API나 여러 가지 지원하는 것들을 이용해 사이트를 만드는 경우가 많습니다. 그러다 보니 웹사이트에서 어떠한 부분을 확인하여 무언가를 바꾸려고 하려면 크롬 브라우저에서 지원하는 개발자 모드를 활용하시면 굉장히 좋습니다.
가장 먼저 HTML과 CSS를 원하는 부분에서 수정하고 테스트해 보시려면 크롬 브라우저에서 특정 사이트를 여시고 F12를 눌러 개발자 모드를 열어 주시면 됩니다.
아래 이미지와 같이 왼쪽은 개발자 모드 오른쪽은 웹사이트가 표시됩니다.
왼쪽 화면에 개발자 모드 페이지에서 빨간색 화살표 방향에 표시된 부분에 버튼을 눌러 주시고 오른쪽 웹페이지에서 수정하거나 변경하고자 하는 태그를 마우스로 선택해 주시면 됩니다.
그럼 아래 이미지와 같이 특정 영역이 선택되게 되며 HTML 영역도 수정해 보실 수 있고 CSS 영역도 크롬 브라우저에서 수정하실 수 있습니다.
크롬 브라우저를 이용해 HTML을 수정하는 것은 이전에 작성한 글을 참고하시면 도움이 되실 겁니다.(https://zzarungna.com/1303)
HTML에서 원하는 CSS를 변경하시려면 파란색 영역 부분에서 얼마든지 CSS 코드를 변경해 보실 수 있습니다. 파란색 밑줄 부분을 통해서 현재 웹페이지에 있는 CSS 코드도 직접 확인이 가능합니다.
밑줄 그은 CSS 파일을 클릭해 보시면 크롬 브라우저에 해당 CSS 파일도 모두 확인 하실 수 있습니다. 아래 이미지와 같이 나온 경우도 있지만, 파일의 최적화를 위해서 공백을 모두 제거한 CSS 경우는 알아보기 힘든 경우도 있습니다.
크롬 브라우저에서는 JavaScript(jQuery)도 얼마든지 테스트하실 수 있습니다. 소스 영역을 수정하면서 작업을 페이지를 매번 확인하실 수도 있지만 개인적으로 이렇게 테스트해 보고 완료되면 소스 파일에 직접 수정을 하는 편입니다.
아래 이미지와 크롬 브라우저 개발자 모드에서 Console 영역을 누르시면 얼마든지 코드를 테스트하실 수 있습니다.
간단히 for 문을 돌리고 콘솔 로그로 찍어보니 잘 작동하는 것을 확인 할 수 있었습니다. 코드를 보기 편하게 하기 위해서 띄어쓰기나 다음 칸에 작성하고자 하시는 구문은 Shift+Enter를 눌러 주시고 코드를 작성하시면 한 줄에 다 작성하지 않으셔도 됩니다.
Console 영역에 현재 나온 HTML 영역의 태그의 개수도 체크가 되는지 테스트해 보도록 하겠습니다. class가 r_sidebar인 녀석들의 DIV 개수가 얼마나 되는지 확인해 보겠습니다.
아래 이미지와 같이 변수도 사용할 수 있고 jQuery도 사용 가능합니다. jQuery를 이용해 특정 태그를 찾고 로그를 찍어 보니 7이라고 표시가 됩니다.
크롬 브라우저에서 jQuery 사용도 가능하며 현재 웹페이지에 나온 내용에서 특정 태그를 찾고 테스트해 볼 수 있기 때문에 개인적으로 굉장히 유용하게 사용하고 있습니다.
마지막으로 웹페이지 속도가 느린 경우 크롬 브라우저를 이용해 네트워크 상태를 확인해 보실 수 있습니다. 왼쪽 크롬 브라우저 개발자 모드에서 Network 메뉴를 눌러 주시고 오른쪽 웹사이트를 새로 고침. 하시면 아래 이미지와 같이 해당 웹페이지에서 불러오는 정보들을 확인해 보실 수 있습니다.
그럼 상세 내용 확인이 가능하며 어떠한 파일에서 시간이 오래 걸리는지 확인하실 수 있습니다. 개인적으로 웹페이지를 로딩하면서 사이트가 느린 경우 Time 부분을 눌러 보시면 어떤 내용이 시간이 오래 걸리는 지 시간순으로 정렬이 됩니다.
그럼 사이트가 로딩되면서 가장 오랜 시간이 걸린 파일을 찾으실 수 있으며 해당 내용에 대한 부분을 해결하시면 상당 부분 사이트 속도가 개선되실 겁니다.
개인적으로 웹 프로그래밍과 관련된 작업을 진행하면서 문제가 되는 부분이 있다면 크롬 브라우저에서 테스트를 거쳐서 문제를 해결합니다.
처음엔 저도 모든 내용을 파악하고 있는 게 아니다 보니 복잡하기도 하고 눈에 잘 안 들어 왔었는데 하다 보니 어는 순간 눈에 들어오고 익숙해지다 보니 작업을 진행하면서 굉장히 편리해진 기억이 납니다.
크롬 브라우저 개발자 모드를 이용해 코드를 작성하면 편리한 점은 실제 소스 파일을 변경하는 것이 아니기 때문에 원본 파일이 유지가 된다는 점과 저도 여러 가지 테스트가 필요한데 코드를 매번 파일에 작성하고 웹페이지를 확인하는 것보다 코드를 확실히 확인할 수 있다는 점이 큰 장점인 것 같습니다.
물론 작업을 진행하면서 페이지를 새로 고치거나 다시 불러온다면 작성하고 수정했던 모든 내용이 삭제되니 크롬 브라우저에서 작성하고 활용하고자 하시는 코드는 반드시 어딘가에 복사하시기를 바랍니다.
크롬 브라우저 개발자 모드를 활용해 개인적으로 사용하고 있는 방법들을 몇 가지 작성해 봤습니다. 혹시라도 필요하신 분들에게 좋은 내용이 되었기를 바랍니다.
