4 간단한 기술을 신속하게 디버깅하고 수정하 CSS 코드에서 거의 모든 브라우저

4 간단한 기술을 신속하게 디버깅하고 수정하 CSS 코드에서 거의 모든 브라우저

있도록 설계에 대한 완벽한 레이아웃의 새로운 곧 웹 사이트입니다. 하지만 지금은 픽셀 완벽한 코드로 모든 아름다운 포토샵 계층화 된 파일을 변환하는 것은 어려운 부분입니다. 코딩하는 방법을 모르기 때문에 어려운 것은 아니지만 다른 브라우저가 코드를 다르게 렌더링하기 때문에 더 어렵습니다. 한 브라우저에서 버그를 수정하면 이제 다른 브라우저에서 새로운 버그가 될 때 더욱 실망 스럽습니다. 비록 그것이 도전적이지 않더라도,지금 당신이 사방에 있는 누군가 다른 사람의 부호를 고치기 위하여 할당된ㄴ다는 것을 상상하십시오. 당신은 아마 마음으로 전체 스타일 시트를 알고 있기 때문에이 새로운 코드는 어떤 코딩 규칙에 가까운 곳이 없습니다. 그러나 디버깅을 통해 점점 더러워지는 순간은 이러한 매우 간단한 도구와 기술 덕분에 이전보다 훨씬 간단하고 덜 실망 스럽습니다.

1)요소 검사 도구

지금까지 요소 검사 아무것도 디버깅을 시작하는 가장 좋은 도구입니다. 당신이 웹사이트를 개발하는 경우에,당신은 웹 개발 공구의 적당한 세트를 필요로 한다. 그리고 다행히 요소는 이제 개발자 도구의 일환으로 모든 현대적인 웹 브라우저에 기본적으로 통합되어 검사합니다. 이 도구를 사용하면 수정하려는 페이지에서 특정 요소를 선택할 수 있습니다. 당신이해야 할 모든 단지 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서”요소 검사”를 선택합니다.

이제 해당 요소에 대해 계산 된 모든 규칙에 대한 전체 시각적 액세스 권한이 있습니다. 당신이 바로 그 요소를 선택하지 않은 경우,당신은 단순히 당신이 진단하고 싶은 정확한 요소를 소스와 핀 포인트를 클릭 할 수 있습니다. 위의 스크린 샷에서 볼 수 있듯이,지금 당신은 당신의 수사 규칙을 조정할 수 있습니다. 당신은 그 속성을 전환 할 수 있습니다,또는 속성을 클릭하고 그 값을 변경,또는 키를 입력하고 요소에 대한 새로운 규칙을 추가했다. 호버 상태:심지어 가장 놀라운 단순히 선택한 요소 옆에 드롭 다운 메뉴를 열고 선택하여 요소의 호버 상태를 디버깅 할 수 있습니다 얼마나 쉽게이다. 당신은 오른쪽 패널에서 볼 수 있듯이,이 놀라운 도구는 심지어 당신에게 스타일 시트 파일 및이 페이지에서 실행되고있는 연사 규칙의 줄 번호를 보여줍니다. 또한 스타일 라인 1026 의 규칙 때문에 우리 요소가 5 픽셀 대신 10 픽셀의 상단 및 하단 패딩을 갖는 이유를 이해하는 것이 더 이해하기 쉽습니다.미디어 쿼리는 동일한 파일의 916 행에 있는 이전 규칙을 덮어씁니다. 제 3 자 눈금자 또는 측정 도구를 사용하지 않고 현재 치수로 선택한 요소의 상자 모델을 볼 수도 있습니다. 이 풍부한 정보를 보유하면 디버깅 작업이 훨씬 쉬워집니다. 스타일 시트 이메일 양식 필드가 다른 입력 요소와 유사하지 않으며 어떻게 해결할 수 있는지 궁금하다고 가정 해보십시오. 따라서 이 선택기를 스타일시트에 추가합니다.

input,input{ border: 1px solid #ccc;}

구글 크롬은 또한 동일한 기능을 가능하게 유사한 개발자 도구가 있습니다. 심지어 레이아웃을 테스트하려는 장치의 화면 해상도로 디버깅 모드를 변경할 수도 있습니다.

이러한 개발자 도구는 돔 검사,자바스크립트 프로파일링,자바스크립트 콘솔,리소스 모니터링 도구 및 이 문서를 넘어 자체 자습서 섹션이 필요한 다른 기능 집합과 같은 개발 외에도 매우 강력한 기능을 갖추고 있습니다. 위의 그림에서 볼 수 있듯이,크롬 개발자 도구,그것은 다른 브라우저 사용자 에이전트를 에뮬레이트,또는 강타 같은 터치 이벤트를 에뮬레이트하는 것도 가능하다. 이러한 도구를 사용하면 적어도 어느 정도,적극적으로 스마트 폰의 모바일 브라우저에서 씨에스에스를 디버깅 할 필요가 없습니다.

어떤 브라우저의 개발자 도구가 가장 좋은지는 실험을 통해 발견 할 수있는 질문입니다. 하루의 끝에서 그것은 모두 당신이 달성하려고하는 것과 그 도구 세트가 당신을 당신의 최종 목표에 도달 할 수있게한다면 달려 있습니다. 나는 개인적으로 내 이점에 이러한 모든 도구를 사용합니다. 각각은 내가 좋아하는 것을 가지고 있으며 코드를 디버깅하고 싶을 때 도움이됩니다. 이러한 작은 차이는 이러한 개발자 도구 사이에 나를 대체 할 수 있습니다.

방화범

방화범은 관리자 기능을 제공하는 최초의 도구 중 하나였다. 그것은 거의 300 만 평균 사용자와 가장 인기있는 웹 개발 도구 중 하나입니다. 그러나 파이어 폭스에서 자바 스크립트 디버깅을 위해 나는 여전히 파이어 버그를 사용합니다.

더 이상 하지 마

당신은 놀랄 수도 있지만 인터넷 익스플로러는 심지어 자신의 개발자 도구(에프 12)에 요소(컨트롤+비)기능을 검사했다. 다른 브라우저의 개발자 도구만큼 친절하지는 않지만 여전히 인터넷 익스플로러 9 에 내장 된이 기능은 에뮬레이트 모드에서 레이아웃을 테스트하는 데 매우 유용합니다. 이 개발자 도구 중 어느 것도 오래된 브라우저를 디버깅하는 데 사용할 수 없었던 시절로 돌아 가면이 두 번째 기술은 일반적으로 매우 편리했습니다.

2)스타일 디버그

검사 요소만큼 좋은,때로는 어느 당신은 모바일 브라우저로,해당 도구에 액세스 할 수 없습니다,또는 당신은 페이지에있는 요소의 커플 대신 특정 하나의 스타일을 조정하려면. 나는 스타일링 오전 요소의 경계를 알고 사랑,그래서 어떤 오버 플로우가 있는지 알고,또는 부동 문제,또는 등…그 이유로 나는 스타일링을 오전 활성 요소에 밝고 눈에 띄는 배경 색상을 추가하고 스타일이 완료되면 배경 색상을. 때때로,나는 앞뒤로 이러한 요소를 조정 이동,그래서 난 그냥 내 스타일 시트의 끝으로 디버깅 코드를 이동하고 그것을 주석,내가 다시 필요로하면 주석 처리. 이 방법으로 디버깅 모드를 빠르게 전환하고 각 요소가 화면에 어떻게 배치되는지 확인할 수 있습니다.

어떤 결과…

이 예제에서는 내 페이지의 기본 구조 블록 항목에 디버그 코드를 추가했습니다. 이제 각 게시물이 시작되는 곳과 사이드 바의 각 게시물 또는 위젯 항목 사이에 얼마나 많은 격차가 있는지 알 수 있으며 사이드 바 및 주요 콘텐츠 사이에 간격을 추가하려는 경우 시각적으로 밝은 색상으로 볼 수 있습니다.

이 반대의 경우도 디버그 규칙의 시리즈를 정의하고,우리가보고 싶은 어떤 항목에 해당 클래스를 추가하여 가능합니다. 예를 들어,위의 나는 다음 코드와 디버그라는 새로운 클래스를 정의했다.

.debug{ border:1px solid red; }

요소를 디버깅하고 싶을 때마다 해당 요소에 디버그 클래스를 추가하기 만하면됩니다.

<div class="foo debug">Div element with foo and debug classes</div>

3) 이 기술은 위와 매우 유사하지만 때로는 이상한 이유로 위의 상황이 가능하지 않은 경우가 있습니다. 이 경우 디버그 클래스를 푸 요소에 적용하거나 바 요소에 직접 추가 할 수 있습니다.

$(document).ready(function(){ $('.foo').addClass('debug'); $('.bar').css('border' : '1px solid blue'); });

이 상황은 매우 드물게 발생할 수 있지만 과거에이 기술을 사용했다는 것을 알고 있으므로 아는 것이 좋습니다.

4)캐스케이드

에 대해 알아봅시다. 일반적으로 대부분의 문제점은 해결하기가 쉽습니다. 또는!important선언이 일반 선언보다 우선합니다. 캐스케이드를 알아가는 것은 당신이 빨리 당신의 계단식 스타일 시트 코드를 해결하는 데 도움이됩니다.

다음은 선택기 특이성이 어떻게 작동하는지에 대한 바로 그 예입니다.

몇 가지 예:

<HEAD><STYLE type="text/css"> #x97z { color: red }</STYLE></HEAD><BODY><P ID=x97z style="color: green"></BODY>

위의 예에서 피 요소의 색상은 녹색입니다. “스타일”특성의 선언은 더 높은 특이성을 가지므로 계단식 규칙 3 으로 인해 스타일 요소의 선언을 재정의합니다. 이 예제를 이해 하기 어려운 생각 하는 경우이 문서를 확인 합니다.

최종 노트

픽셀 퍼펙트 결과를 얻는 것은 브라우저마다 다른 렌더링으로 인해 어렵습니다. 사용하려는 구문이 대부분의 브라우저에서 지원되는지 확인하려면 커뮤니티 프로젝트를 확인하십시오. 그러나 선택적으로 대체 또는 폴리필을 사용하여 전체 구현을 지원하지 않는 브라우저에 누락된 기능을 제공할 수 있습니다.

답글 남기기

이메일 주소는 공개되지 않습니다.