디버그할 웹 페이지 오류입니다. Internet Explorer의 스크립트 오류. 이유 및 제거 방법. SQL 쿼리 프로파일링 웹 페이지 디버그

인터넷을 검색하는 동안 인터넷 브라우저탐색기는 페이지에 오류가 있어 올바르게 표시되지 않을 수 있다는 메시지를 표시할 수 있습니다. 이 문제를 해결하는 몇 가지 방법을 살펴보겠습니다.

지침

간헐적 오류를 제외하고 브라우저에 눈에 띄는 어려움이 없는 경우 스크립트 디버깅을 해제하여 메시지가 다시 나타나지 않도록 할 수 있습니다(오류가 여러 사이트에서 한 번에 여러 사이트에서 나타나는 경우 계속 진행하십시오) 다음 단계로). 도구 메뉴에서 인터넷 옵션을 열고 고급 탭을 선택한 다음 스크립트 디버깅 방지 옆의 확인란을 선택합니다. 모든 오류 알림을 해제해야 하는 경우 "각 스크립트 오류 알림 표시" 확인란을 선택 취소합니다.

다른 계정이나 다른 컴퓨터에서 탐색하는 동안 오류를 일으키는 사이트를 열어 문제가 로컬인지 확인하십시오. 오류가 나타나면 잘못된 웹 페이지 코드가 원인일 가능성이 큽니다. 이 경우 이전 단계의 지침에 따라 스크립트 디버깅을 비활성화할 수 있습니다. 다른 컴퓨터나 계정을 사용하여 사이트를 탐색할 때 문제가 사라지면 다음 단계를 계속합니다.

Internet Explorer는 브라우징 시 페이지의 정보 표시를 결정하는 활성 스크립트, Java 및 ActiveX를 차단하지 않을 수 있습니다. 문제를 해결하려면 브라우저 보안 설정을 재설정해야 합니다. 이렇게 하려면 "도구" 메뉴에서 "인터넷 옵션"을 선택하고 "보안" 탭으로 이동합니다. "기본값" 버튼을 클릭한 다음 "확인"을 클릭합니다. 오류를 일으킨 페이지를 다시 실행한 후에도 문제가 지속되면 다음 방법을 시도하십시오.

아시다시피 브라우저는 나중에 액세스할 수 있도록 임시 파일과 페이지 복사본을 별도의 폴더에 저장합니다. 폴더 크기가 너무 커지면 일부 페이지에 오류가 표시될 수 있습니다. 임시 파일 폴더를 주기적으로 지우면 문제를 해결할 수 있습니다. 이렇게 하려면 도구 메뉴에서 인터넷 옵션 대화 상자를 엽니다. 일반 탭의 기록 그룹에서 삭제 버튼을 클릭합니다. 임시 인터넷 파일, 쿠키, 기록, 웹 양식 데이터 상자를 선택하고 확인을 클릭합니다.

물론 다른 것도 있습니다. 확실히 언급하겠습니다.

Firefox용 방화범

나는 확실하지 않다. 개똥 벌레다른 개발자 도구의 시조이지만 지금까지 확실히 가장 인기 있고 편리하며 기능적입니다.

Firebug는 Firefox용 애드온이므로 Firefox 애드온 사이트에서 다운로드하여 설치해야 합니다.

방화범을 호출하려면 F12를 누르십시오.

이 부가 기능의 기능:

• 동적으로 변경되는 HTML 검사 및 편집
• 즉석에서 CSS 편집;
• 자바스크립트 디버깅 명령줄스크립트 실행
• 네트워크 요청 모니터링 - 파일 및 스크립트, 요청 헤더의 크기와 다운로드 시간을 볼 수 있습니다.
• DOM 파서.

이러한 기능에 대해 오랫동안 자세히 이야기 할 수 있지만 모든 독자에게 알려져 있다고 생각하며 그렇지 않은 경우- 자세한 정보 Firebug의 홈 페이지에 있거나 Ilya Kantor의 번역에서 동일합니다.

방화범 자체 외에도 다음이 필요할 수 있습니다. 유용한 로션그에게 - 파이어쿠키, (놀랍게도:-) 쿠키를 보고 수정할 수 있습니다.

Firefox용 웹 개발자 도구 모음

Ognelis에 또 다른 유용한 추가 기능입니다. 다음과 같습니다.

포인트를 살펴보겠습니다.

장애를 입히다

JavaScript를 끄고 캐시 사용을 비활성화할 수 있습니다. 이는 개발할 때 매우 유용합니다(페이지가 로드되었는지 확인할 수 있습니다. 최신 업데이트), 페이지에 사용된 색상을 취소하고 표준 색상으로 교체하고, 리퍼러 헤더(전환이 이루어진 페이지)에서 전송을 비활성화합니다.

쿠키

쿠키 작업에 유용한 옵션: 쿠키를 보고, 삭제하고, 차단하고, 추가할 수 있습니다.

CSS

이 메뉴에는 개발자 도구 모음의 가장 멋진 기능인 즉석 CSS 편집 기능이 있습니다. 또한 css 보기, 비활성화 등이 가능합니다. 제 생각에는 여기에서 키보드 단축키의 존재가 매우 유용합니다(예를 들어 CTRL + SHIFT + C를 사용하면 페이지 스타일 보기로 즉시 이동할 수 있음).

양식

양식 작업을 위한 모든 것: 암호 표시, 양식에 대한 정보 표시, 양식 메소드 변환(GET » POST 및 그 반대) 등. 양식 필드를 자동으로 채우는 유용한 기능인 "양식 필드 채우기"(예: 암호 기억 기능이 비활성화된 상태에서 사이트를 테스트할 때). 그렇지 않으면 이 단락에서 유용한 내용이 보이지 않습니다.

이미지

이미지를 끄는 유용한 기능이 있어 이미지 없이 사이트가 어떻게 보이는지 확인할 수 있습니다. 사진에 동그라미를 치고 크기를 표시하고 대체 속성을 표시할 수 있습니다.

정보

이 메뉴에는 많은 옵션이 있습니다. 페이지에 class 및 id 속성을 표시하는 것이 유용할 수 있습니다. 또한 페이지에서 사용되는 색상에 대한 정보를 빠르게 얻을 수 있는 "색상 정보 보기" 항목이 흥미롭습니다. "문서 크기 보기" - 페이지 크기 보기. "응답 헤더 보기" - 페이지 헤더를 봅니다.

여러 가지 잡다한

가장 일반적으로 사용되는 기능은 캐시 지우기입니다. 또한 "페이지 눈금자" - 눈금자, "페이지 돋보기" - 돋보기 및 "선 안내선" - 템플릿을 다듬는 데 유용할 수 있는 몇 줄을 여기에서 사용할 수 있습니다.

개요

테이블, 제목, 링크, 프레임, 블록 등 다양한 페이지 요소 선택. 크기 조정을 사용하면 표준 화면 확장에 맞게 브라우저 창의 크기를 조정할 수 있습니다. 여기서 도구는 페이지 유효성 검사를 위해 저장된 기능입니다. 로컬 및 외부 모두. 편리하고 빠른 액세스 HTML, CSS 등을 검증합니다. CTRL+SHIFT+H 키보드 단축키를 사용하여 HTML을 확인할 수 있습니다.

소스보기

보다 소스 코드. 외부 애플리케이션에서 볼 수 있는 기능, 생성된 코드 보기.

오른쪽이 제가 가장 좋아하는 것입니다. 빠른 HTML, CSS 유효성 검사기 및 JavaScript 오류 표시기입니다. 문제가 없으면 아이콘이 녹색이고 문제가 있으면 빨간색입니다.

Internet Explorer 개발자 도구 모음

8.0부터 오류 디버그가 이미 이 브라우저에 내장되어 있습니다. 쉽게 불려요 F12 키. 사실 그는 90년대 프로그램으로서는 비참하다.

그러나이 브라우저에는 훨씬 더 멋진 도구가 있으며 소위 Internet Explorer 개발자 도구 모음은 링크에서 다운로드할 수 있습니다.

물론이 도구 모음은 외관상 방화범처럼 보이지만 아쉽게도 아직까지 성장하지 않았습니다. 반면에 Firebug에는 없는 몇 가지 기능이 있습니다. 나는 Internet Explorer Developer Toolbar를 Firebug와 파이어폭스 웹 개발자도구 모음.

방화범과 마찬가지로 요소를 검사하는 옵션이 있습니다. 간단한 클릭으로. 그러나 패딩과 여백을 즉시 볼 수 있다면 여기에는 그런 가능성이 없습니다.

또한 Internet Explorer 개발자 도구 모음은 Firebug처럼 요소 트리를 동적으로 업데이트하지 않습니다. 즉, js를 사용하여 페이지에서 무언가를 변경하면 이 도구 모음을 사용하여 아무것도 볼 수 없습니다.

즐길 수 있는 것부터 즉석에서 CSS 변경(해킹할 항목을 쉽게 찾을 수 있는 방법 :), CSS 및 이미지를 비활성화하는 기능, 캐시를 빠르게 지우고 쿠키로 재생하는 기능, 유효성 검사에 대한 빠른 액세스.

가장 맛있는 기능: 스포이드를 사용하여 페이지에서 원하는 색상을 얻을 수 있는 내장 색상 선택기가 있습니다. (ff의 경우 별도의 ColorZilla 플러그인이 있습니다).

Internet Explorer용 디버그 디버그 표시줄

주어진 링크에서 Internet Explorer용 DebugBar를 다운로드할 수 있습니다.

그 자체로 흥미로운 확장입니다. 브라우저에 추가 패널로 설치됨:

어떤 이유로 내장 검색 엔진, 스포이드, 창 크기 조정 기능, 그리고 어떤 이유로 비누를 위해 친구에게 페이지를 보내는 기능이 있습니다. 유용할 수도 있지만. 그러나 나는 이 기회를 활용하지 못했다.

또한 검사관이 있습니다.

클릭하거나 포인팅하여 검사하는 방법은 개발자에게 적합하지 않았습니다. 그들은 더 흥미로운 것을 생각해 냈습니다. DebugBar에서 대상을 원하는 요소로 드래그해야 트리에서 볼 수 있습니다. CSS를 편집할 수 있는 옵션이 없습니다. 그러나 유효성 검사기와 내장 js 콘솔이 있습니다.

그리고 설정을 파헤쳐 보면 다음을 찾을 수 있습니다.

재미 있고 슬프다.

8번째 익스플로러에는 개발자 툴바가 내장될 것으로 알려졌다. 세 번째 단락에서 설명한 것과 비슷하지만 더 나아지기를 바랍니다.

Opera용 DragonFly 디버그

DragonFly는 버전 9.5부터 Opera에 내장되어 있으므로 설치할 필요가 없습니다. Dragonfly를 활성화하려면 도구 → 고급 → 개발자 도구로 이동합니다. 그리고 영어라면 도구 → 고급 → 개발자 도구.

DragonFly가 Alpha2 단계에 있음을 즉시 경고합니다. 이것은 많은 결함을 설명합니다.

기능 목록:

• DOM 검사자;
• 검사를 클릭합니다(다시 말하지만 FireFox에서처럼 패딩이 표시되지 않습니다).
• 편집;
• 오류 콘솔에 빠르게 액세스합니다.

DF는 프레임의 별도 페이지와 같습니다. 열면 방화범과 달리 모든 탭에 대해 열립니다. 따라서 요소를 검사하기 전에 목록에서 보려는 페이지를 선택해야 합니다.

불행하게도 여기서 Internet Explorer에서와 같이 Dav 도구 모음은 동적으로 생성된 요소를 표시하지 않습니다. 그리고 일반적으로 페이지를 검사할 때 JavaScript가 실행되지 않습니다. 링크와 버튼이 클릭되지 않습니다. DragonFly가 출시될 때 이러한 모든 기능을 볼 수 있기를 바랍니다.

Safari에서 WEB 검사기 디버그

브라우저에 대해 바로 말할 것입니다 원정 여행나는 정보를 휘파람을 불었으므로 그들이 말했듯이 자료의 적절성에 대해 책임지지 않습니다.

Safari 메뉴에서 "개발" 항목을 활성화하려면 설정("고급" 탭)에서 해당 항목을 활성화해야 합니다.

"개발" 메뉴에서 다음 기능을 사용할 수 있습니다.

WEB 인스펙터를 자세히 살펴보겠습니다.

기본적으로 인스펙터는 HTML 보기 모드에서 열립니다. 그러나 DOM 보기 모드로 전환할 수 있습니다. 이를 위해 상단 플레이트에 스위치가 있습니다. 인스펙터에서 요소 위로 마우스를 가져가면 페이지 자체에서 강조 표시됩니다. FireBug에서 볼 수 없는 것처럼 패딩을 보거나 마크업 또는 CSS를 즉시 변경하거나 DOMe에 대한 동적 변경을 즉시 볼 수 없습니다. 하지만 보시다시피 아주 멋져 보입니다.

브라우저 창에서 인스펙터로 작업하려면 왼쪽 하단 모서리에 있는 버튼을 클릭하면 됩니다.

Safari에서도 "네트워크 타임라인"과 같은 기능을 사용할 수 있습니다(검사기의 "네트워크" 버튼).

파일이 로드되는 시기와 시간을 명확하게 확인할 수 있습니다. 요청 헤더도 볼 수 있지만 콘텐츠 자체는 볼 수 없습니다.

Google Chrome의 개발자를 위한 디버그

Lame은 진보된 형태로 태어났고 지금은 비뚤어졌지만 여전히 개발자를 위한 도구를 즉시 갖게 되었습니다.

• DOM 검사기;
• 자바스크립트 디버거;
• 자바스크립트 콘솔.

요소를 검사하려면 요소를 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴"요소 코드 보기"를 선택합니다.

기능은 Safari와 동일합니다. 마우스를 올리면 요소가 강조 표시되지만 CSS 및 HTML 편집을 사용할 수 없으며 DOM의 변경 사항이 추적되지 않습니다. 단, 인스펙터를 브라우저 창에 연결해야 하는 왼쪽 하단의 버튼이 작동하지 않습니다.

"리소스" 탭에서 다음을 볼 수 있습니다.

사파리의 규모와 약간 다릅니다. 이 다이어그램에서 반투명은 상대적인 파일 크기이고 전체 색상은 다운로드 시간입니다. 어떤 식으로든 크롬의 이 부분은 아직 완성되지 않은 것이 분명합니다.

이 기사에서는 가장 유명한 브라우저용 확장 기능과 기본 제공 도구를 검토했습니다.

예를 들면 다음과 같습니다.

• Internet Explorer WEB Development Helper는 ASP.NET 개발자(Internet Explorer)를 위한 좋은 도우미입니다.
• 웹 개발자 도구 모음 - Internet Explorer 및 FireFox용 도구 모음입니다. 몇 가지 유용한 기능이 있습니다.
• 웹 접근성 도구 모음 - Internet Explorer용 도구 모음입니다. 흥미로운 것은 없습니다.

내가 언급하지 않았지만 그만한 가치가 있는 추가 기능이 있거나 내가 놓친 언급된 확장 기능이 있는 경우 작성하십시오.

건강에 사용!

HTML을 작성하는 것은 훌륭하지만 무언가가 작동하지 않을 때 오류가 발생한 위치를 어떻게 알 수 있습니까? 이 문서에서는 HTML에서 오류를 찾아 수정하는 데 도움이 되는 몇 가지 도구에 대해 설명합니다.

디버깅은 두렵지 않다

코드를 작성하는 동안 실수를 하는 순간까지 모든 것이 일반적으로 잘 진행됩니다. 따라서 코드가 작동하지 않거나 의도한 대로 작동하지 않습니다. 작동하지 않는 Rust 프로그램을 컴파일하려고 하면 컴파일러에서 오류를 보고합니다.

이 경우 오류 메시지는 상대적으로 이해하기 쉽습니다. "종료되지 않은 큰따옴표 문자열"입니다. println!(Hello, world!"); 를 주의 깊게 살펴보면 다음이 없음을 알 수 있습니다. 큰따옴표. 물론 오류 메시지는 코드가 커짐에 따라 이해하기 훨씬 더 어려워질 수 있으며 가장 단순한 경우도 Rust에 대해 아무것도 모르는 사람들에게는 위협이 될 수 있습니다.

그러나 디버그하는 것을 두려워하지 마십시오! 편안하게 코드를 작성하고 디버그하려면 언어와 해당 도구를 이해해야 합니다.

HTML과 디버깅

HTML은 Rust만큼 이해하기 어렵지 않습니다. HTML은 브라우저가 HTML을 구문 분석하고 결과를 표시하기 전에 다른 형식으로 컴파일되지 않습니다(컴파일되지 않고 해석됨). 통사론 HTML 요소 Rust, JavaScript 또는 Python과 같은 "실제 프로그래밍 언어"보다 훨씬 명확합니다. 브라우저가 HTML을 읽는 방법은 더 관대 한코드를 더 엄격하게 해석하는 프로그래밍 언어보다 이것은 동시에 나쁘고 좋습니다.

허용 코드

그렇다면 관용은 무엇을 의미합니까? 일반적으로 코드를 엉망으로 만들면 두 가지 유형의 오류가 발생합니다.

• 구문 오류: 위의 Rust 예제에서와 같이 철자 오류입니다. 이러한 문제는 언어 구문에 익숙하고 오류 메시지의 의미를 알고 있는 한 일반적으로 쉽게 수정할 수 있습니다.
• 논리 오류: 구문은 정확하지만 코드가 목적을 달성하지 못하는 경우, 즉 프로그램이 올바르게 실행되지 않는 경우 나타나는 오류입니다. 실수를 한 위치를 나타내는 메시지가 표시되지 않기 때문에 문법적인 것보다 수정하기가 더 어렵습니다.

HTML은 구문 오류가 있어도 페이지를 렌더링할 수 있다는 점에서 브라우저가 코드를 허용하기 때문에 구문 오류가 발생하지 않습니다. 브라우저에는 잘못 작성된 마크업을 해석하기 위한 기본 제공 규칙이 있으며 다른 것을 의미하더라도 무언가를 실행할 수 있습니다. 이것은 진짜 문제가 될 수 있습니다!

메모에: HTML은 웹이 처음 존재했을 때 코드가 정확하지 않더라도 사람들이 콘텐츠를 게시할 수 있도록 허용하기로 결정했기 때문에 읽을 수 있습니다. 이는 구문이 절대적으로 정확한지 확인하는 것보다 훨씬 더 중요하기 때문입니다. 웹이 초보자에게 엄격했다면 지금 웹이 그렇게 인기가 없었을 것입니다.

능동적 학습: 관용 코드 소개

HTML에서 허용되는 코드의 특성을 탐색할 시간입니다.

HTML 유효성 검사

위의 예에서 HTML의 유효성을 확인할 가치가 있음이 분명합니다. 위의 간단한 예에서는 모든 코드를 살펴보고 오류를 찾을 수 있지만 거대하고 복잡한 페이지는 어떻습니까?

마크업 유효성 검사 서비스에서 페이지를 확인하는 것이 가장 좋습니다. HTML, CSS 및 기타 웹 기술의 사양을 담당하는 조직인 W3C에서 만들고 유지 관리했습니다. 이 서비스는 HTML을 확인하고 오류를 보고합니다.

HTML은 파일을 업로드하거나 단순히 페이지에 복사하여 주소에서 확인할 수 있습니다.

능동적 학습: HTML 문서 유효성 검사

1. 브라우저에서 마크업 유효성 검사 서비스를 엽니다.
2. 직접 입력 모드로 유효성 검사로 전환합니다.
3. 문서의 전체 코드(본문뿐만 아니라)를 복사하여 입력란에 붙여넣습니다.
4. 누르다 체크(체크).

오류 및 기타 정보 목록이 표시됩니다.

오류 메시지 작업

일반적으로 메시지의 의미는 즉시 명확하지만 때때로 메시지가 무엇인지 이해하려고 노력해야 합니다. 이제 우리는 모든 오류를 살펴보고 그 의미를 분석할 것입니다. 메시지에는 오류를 쉽게 찾을 수 있도록 코드 행과 열이 포함되어 있습니다.

• "종료 태그 li이 암시되었지만 열린 요소가 있었습니다"(2개 인스턴스): 브라우저가 있어야 할 위치를 추측하지만 명시적인 종료 태그가 없습니다. 메시지는 종료 태그가 예상되는 줄 뒤의 줄을 가리키지만 올바른 위치를 찾을 수 있습니다.
• "닫히지 않은 요소 강함": 이것은 매우 단순한 실수- 요소)는 내용이 매우 중요하거나 심각하거나 긴급함을 나타냅니다. 브라우저는 일반적으로 콘텐츠를 렌더링합니다. 굵게."> 닫히지 않고 메시지가 시작 태그를 직접 가리킵니다.
• "종료 태그가 중첩 규칙을 위반함": 요소가 잘못 중첩되었습니다. 이 수준에는 일치하는 여는 태그가 없습니다.
• "속성 값 내부에서 파일 끝에 도달했습니다. 태그 무시": 신비한 메시지. 문제는 어딘가(대부분 문서의 끝)에 요소의 속성이 잘못 등록되어 있고 파일의 끝이 이 속성에 나타난다는 것입니다. 링크가 브라우저에 표시되지 않습니다. 대부분 문제가 옆에 있습니다.
• "파일 끝이 보이고 열린 요소가 있음": 파일이 종료되었지만 일부 요소가 닫히지 않았습니다. 메시지는 파일의 끝을 나타냅니다. 이 경우 요소는 닫히지 않습니다. 예: Mozilla 홈페이지 링크 ↩

↩ ↩

종종 사용자는 브라우저(IE)에 스크립트 오류 메시지가 나타나는 상황을 관찰할 수 있습니다. 상황이 격리되어 있으면 걱정할 필요가 없지만 이러한 오류가 규칙적으로 발생하면 이 문제의 본질에 대해 생각해야 합니다.

Internet Explorer의 스크립트 오류는 일반적으로 HTML 페이지 코드를 제대로 처리하지 못하는 브라우저, 임시 인터넷 파일의 존재, 계정 설정 및 기타 여러 가지 이유로 인해 발생합니다. 논의될 것이다이 자료에서. 이 문제를 해결하는 방법도 고려됩니다.

스크립트 오류를 ​​일으키는 Internet Explorer 문제를 진단하기 위한 일반적인 방법을 진행하기 전에 오류가 특정 사이트 하나뿐만 아니라 한 번에 여러 웹 페이지에서 발생하는지 확인해야 합니다. 또한 다른 환경에서 문제가 발생한 웹 페이지를 확인해야 합니다. 계정, 다른 브라우저 및 다른 컴퓨터에서. 이것은 오류의 원인에 대한 검색 범위를 좁히고 PC에 특정 파일이나 설정이 있기 때문에 메시지가 나타난다는 가설을 배제하거나 확인합니다.

Internet Explorer 활성 스크립트, ActiveX 및 Java 차단

액티브 스크립팅, ActiveX 컨트롤 및 Java는 사이트에서 정보가 생성되고 표시되는 방식에 영향을 미치며 사용자의 PC에서 차단된 경우 앞서 설명한 문제의 실제 원인이 될 수 있습니다. 이러한 이유로 스크립트 오류가 발생하는지 확인하려면 브라우저의 보안 설정을 재설정하기만 하면 됩니다. 이렇게 하려면 다음 지침을 따르십시오.

• 인터넷 익스플로러 11 열기
• 서비스

• 창에서 탭으로 이동합니다. 안전
• 다음으로 버튼을 클릭 기본그런 다음 버튼 좋아요

Internet Explorer 임시 파일

웹 페이지를 열 때마다 Internet Explorer는 이 웹 페이지의 로컬 복사본을 소위 임시 파일로 PC에 저장합니다. 이러한 파일이 너무 많고 이를 포함하는 폴더의 크기가 수 기가바이트에 도달하면 웹 페이지 표시에 문제가 발생할 수 있습니다. 즉, 스크립트 오류 메시지가 나타납니다. 임시 파일 폴더를 정기적으로 지우면 이 문제를 해결하는 데 도움이 될 수 있습니다.
임시 인터넷 파일을 삭제하려면 다음 단계를 따르십시오.

• 인터넷 익스플로러 11 열기
• 서비스
• 창에서 탭으로 이동합니다. 흔하다
• 장에서 브라우저 기록버튼을 누르십시오 삭제…

• 창에서 검색 기록을 삭제항목 옆의 상자를 선택하십시오. 인터넷 및 웹사이트의 임시 파일, 쿠키및 웹사이트 데이터, 잡지
• 버튼을 클릭 삭제

바이러스 백신 소프트웨어 작동

작업을 통해 스크립트 오류가 발생할 수 있습니다. 바이러스 백신 프로그램페이지의 활성 스크립트, ActiveX 및 Java 컨트롤 또는 임시 브라우저 파일을 저장할 폴더를 차단할 때. 이 경우 설치된 안티바이러스 제품의 설명서를 참조하여 임시 인터넷 파일을 저장하기 위한 폴더 검색 및 대화형 개체 차단을 비활성화해야 합니다.

HTML 페이지 코드의 잘못된 처리

일반적으로 특정 사이트에 나타나며 페이지 코드가 Internet Explorer에서 작동하도록 완전히 조정되지 않았음을 나타냅니다. 이 경우 브라우저에서 스크립트 디버깅을 비활성화하는 것이 가장 좋습니다. 이렇게 하려면 다음과 같이 하십시오.

• 인터넷 익스플로러 11 열기
• 브라우저의 오른쪽 상단에서 아이콘을 클릭합니다. 서비스기어 형태(또는 키 조합 Alt + X). 그런 다음 열리는 메뉴에서
• 창에서 탭으로 이동합니다. 추가적으로
• 다음으로 체크박스를 선택 취소합니다. 모든 스크립트 오류에 대한 알림 표시그리고 버튼을 누르세요 좋아요.

이것은 가장 많은 목록입니다 일반적인 원인, Internet Explorer에서 스크립트 오류가 발생하므로 이러한 메시지에 지쳤다면 약간의주의를 기울이고 문제를 한 번에 해결하십시오.

~에 이 순간기존 HTML 표준을 어느 정도 지원하는 다양한 브라우저가 많이 있습니다. 개인적으로 저는 Mozilla Corporation의 브라우저를 선호합니다. 이 브라우저는 오랜 역사를 가지고 있습니다(유명한 Netscape Navigator 브라우저를 기반으로 함). 또한 플러그인 시스템을 지원하기 때문에 이 브라우저가 마음에 듭니다. 별도로 배포되는 애드온은 연결 시 기능을 변경하고 필요에 따라 사용자 지정할 수 있습니다. 그리고 마지막으로 이 브라우저는 오픈 소스 코드와 함께 자유롭게 배포된다는 점도 중요합니다. 따라서 이 브라우저가 사용자뿐만 아니라 웹 페이지 개발자에게 제공하는 가능성, 작성된 제품을 디버깅하는 프로세스가 얼마나 쉽고 편리한지 설명하기로 결정했습니다.

모질라 파이어 폭스개발자와 웹 개발자 사이에서 가장 인기 있는 브라우저 중 하나입니다. 이 브라우저가 생성된 프로젝트 디버깅, 버그 수정 및 개선을 위해 제공하는 기회 때문에 관심을 끌고 있습니다. 브라우저에는 Java 콘솔(또는 "오류 콘솔")이 표준으로 제공됩니다. 이 유틸리티를 사용하면 포함된 자바 스크립트를 디버깅할 수 있습니다. 그러나 타사 플러그인은 Mozilla Foundation의 공식 웹 사이트에서 다운로드하여 설치할 수 있는 브라우저에 훨씬 더 많은 기능을 제공합니다. 이제 이 플러그인 중 두 가지인 Web Developer와 Firebug를 살펴보겠습니다. 이 두 애드온은 모두 공식 애드온 사이트의 위 링크에서 다운로드할 수 있습니다. 그것들을 설치하고 브라우저를 다시 시작하면 개발자는 각 플러그인에 대해 차례로 아래에서 설명할 충분한 기회를 갖게 됩니다.

방화범 플러그인

공식 페이지에 명시된 바와 같이 “Firebug는 Firefox 브라우저와 통합되어 개발자 툴킷을 크게 강화합니다. 모든 웹 페이지에서 CSS, HTML 및 Javascript 라이브를 편집, 디버그 및 탐색할 수 있습니다.” 그리고 실제로 그렇습니다. 이 플러그인의 일부 기능, 즉 다음을 고려하십시오.

• HTML을 보고 편집합니다.
• CSS 구축.
• 네트워크 요청 모니터링
• 자바스크립트 디버깅
• 자바스크립트 연구
• 자바스크립트 로깅

이것은 모든 기능의 전체 목록이 아닙니다. 프로젝트가 오픈 소스이기 때문에 누구나 기능을 변경하고 추가할 수 있습니다.

플러그인으로 작업하려면 F12 키를 눌러야 합니다(별도의 창에서 작업하려면 Ctrl-F12). 성공적인 출시 후 다음을 얻습니다 - 그림 1a, 1b.

그림 1a. Firebug 플러그인의 초기 창입니다.

그림 1b. Firebug 플러그인의 초기 창입니다.

다음으로 플러그인을 사용한 실제 작업이 시작됩니다. HTML 코드에서 특정 개체를 찾거나 정확히 어떻게 구현되는지 확인해야 한다고 가정해 보겠습니다. CSS 사용현재 단편. 이렇게 하려면 플러그인 창 메뉴에서 마우스로 필요한 옵션을 선택하기만 하면 됩니다. 아래 예에서 이는 검사 모드의 HTML입니다. 이제 문서 페이지로 이동하면 마우스 커서 아래에 작업 중인 영역을 나타내는 직사각형 영역이 표시됩니다. 플러그인 창에서 사용되는 HTML 및 CSS 매개변수를 볼 수 있습니다. 또한 각각을 클릭하여 변경하고 역학에서 추적할 수 있습니다. 설명된 작업은 그림 2,3,4에 설명되어 있습니다.

이 프로젝트의 개발에서 위에서 설명한 플러그인은 이러한 목적을 위해 정확하게 사용되었습니다. 그러나 여기에는 자바 스크립트가 사용되지 않았지만 Firebug 플러그인을 사용하여 디버깅할 수도 있습니다. 디버깅의 예는 그림 5에 나와 있습니다.

이에 대해 위에서 설명한 것처럼 이 확장 프로그램의 기능은 제한되지 않습니다. Mozilla Firefox를 설치한 후 제공된 링크에서 다운로드하여 완전히 연구하고 필요에 따라 사용할 수 있습니다.

웹 개발자 플러그인

웹 개발자 - 두 번째 확장 프로그램 모질라 브라우저빠르고 효율적인 디버깅을 가능하게 하는 매우 강력하고 기능적인 Firefox. 설치 후 그림 6과 같이 추가 도구 모음이 브라우저 창에 나타납니다.

플러그인을 사용한 추가 작업은 직관적입니다. 예를 들어 CSS 작업을 수행해야 하는 경우(Firebug 플러그인만큼 완벽하게 작동하지는 않지만) CSS 메뉴를 클릭하고 비활성화, 활성화 또는 비활성화할 수 있습니다.

개발자가 자신의 프로젝트가 다른 해상도의 모니터에서 어떻게 보이는지 확인할 수 있다는 것은 매우 편리합니다. 이렇게 하려면 크기 조정 탭을 사용하십시오. 여기서 수동으로 설정할 수 있습니다. 필요한 권한화면(800x600, 1024x768 등)으로 전환한 후 자유롭게 전환하거나 콘텐츠를 확대 또는 축소할 수 있습니다. 이 기능은 그림 7에 나와 있습니다.

이 확장 프로그램은 또한 공식 사이트에서 모두 설명되고 사용 가능한 풍부한 기능을 가지고 있습니다.

사용된 소스 목록

• 1. www.getfirebug.com
  추가 기능의 공식 웹 사이트.
• 2. http://addons.mozilla.org
  Mozilla의 공식 웹사이트 호스팅 플러그인 파이어폭스 브라우저, 개발자를 위한 정보, 플러그인 사용에 대한 정보.
• 3. http://chrispederick.com/work/web-developer/
  WebDeveloper 플러그인 개발자의 공식 웹사이트.

인터넷을 탐색하는 동안 Internet Explorer는 페이지에 오류가 있어 올바르게 표시되지 않을 수 있다는 메시지를 표시할 수 있습니다. 이 문제를 해결하는 몇 가지 방법을 살펴보겠습니다.

지침

간헐적 오류를 제외하고 브라우저에 눈에 띄는 어려움이 없는 경우 스크립트 디버깅을 해제하여 메시지가 다시 나타나지 않도록 할 수 있습니다(오류가 여러 사이트에서 한 번에 여러 사이트에서 나타나는 경우 계속 진행하십시오) 다음 단계로). 도구 메뉴에서 인터넷 옵션을 열고 고급 탭을 선택한 다음 스크립트 디버깅 방지 옆의 확인란을 선택합니다. 모든 오류 알림을 해제해야 하는 경우 "각 스크립트 오류 알림 표시" 확인란을 선택 취소합니다.

다른 계정이나 다른 컴퓨터에서 탐색하는 동안 오류를 일으키는 사이트를 열어 문제가 로컬인지 확인하십시오. 오류가 나타나면 잘못된 웹 페이지 코드가 원인일 가능성이 큽니다. 이 경우 이전 단계의 지침에 따라 스크립트 디버깅을 비활성화할 수 있습니다. 다른 컴퓨터나 계정을 사용하여 사이트를 탐색할 때 문제가 사라지면 다음 단계를 계속합니다.

Internet Explorer는 브라우징 시 페이지의 정보 표시를 결정하는 활성 스크립트, Java 및 ActiveX를 차단하지 않을 수 있습니다. 문제를 해결하려면 브라우저 보안 설정을 재설정해야 합니다. 이렇게 하려면 "도구" 메뉴에서 "인터넷 옵션"을 선택하고 "보안" 탭으로 이동합니다. "기본값" 버튼을 클릭한 다음 "확인"을 클릭합니다. 오류를 일으킨 페이지를 다시 실행한 후에도 문제가 지속되면 다음 방법을 시도하십시오.

아시다시피 브라우저는 나중에 액세스할 수 있도록 임시 파일과 페이지 복사본을 별도의 폴더에 저장합니다. 폴더 크기가 너무 커지면 일부 페이지에 오류가 표시될 수 있습니다. 임시 파일 폴더를 주기적으로 지우면 문제를 해결할 수 있습니다. 이렇게 하려면 도구 메뉴에서 인터넷 옵션 대화 상자를 엽니다. 일반 탭의 기록 그룹에서 삭제 버튼을 클릭합니다. 임시 인터넷 파일, 쿠키, 기록, 웹 양식 데이터 상자를 선택하고 확인을 클릭합니다.

꽤 자주 사용자는 Internet Explorer(IE) 브라우저에 스크립트 오류 메시지가 나타나는 상황을 관찰할 수 있습니다. 상황이 격리되어 있으면 걱정할 필요가 없지만 이러한 오류가 규칙적으로 발생하면 이 문제의 본질에 대해 생각해야 합니다.

Internet Explorer의 스크립트 오류는 일반적으로 HTML 페이지 코드를 올바르게 처리하지 못하는 브라우저, 임시 인터넷 파일의 존재, 계정 설정 및 이 자료에서 설명할 기타 여러 가지 이유로 인해 발생합니다. 이 문제를 해결하는 방법도 고려됩니다.

스크립트 오류를 ​​일으키는 Internet Explorer 문제를 진단하기 위한 일반적인 방법을 진행하기 전에 오류가 특정 사이트 하나뿐만 아니라 한 번에 여러 웹 페이지에서 발생하는지 확인해야 합니다. 또한 다른 계정, 다른 브라우저 및 다른 컴퓨터에서 이 문제가 발생하는 웹 페이지를 확인해야 합니다. 이것은 오류의 원인에 대한 검색 범위를 좁히고 PC에 특정 파일이나 설정이 있기 때문에 메시지가 나타난다는 가설을 배제하거나 확인합니다.

Internet Explorer 활성 스크립트, ActiveX 및 Java 차단

액티브 스크립팅, ActiveX 컨트롤 및 Java는 사이트에서 정보가 생성되고 표시되는 방식에 영향을 미치며 사용자의 PC에서 차단된 경우 앞서 설명한 문제의 실제 원인이 될 수 있습니다. 이러한 이유로 스크립트 오류가 발생하는지 확인하려면 브라우저의 보안 설정을 재설정하기만 하면 됩니다. 이렇게 하려면 다음 지침을 따르십시오.

• 인터넷 익스플로러 11 열기
• 서비스

• 창에서 탭으로 이동합니다. 안전
• 다음으로 버튼을 클릭 기본그런 다음 버튼 좋아요

Internet Explorer 임시 파일

웹 페이지를 열 때마다 Internet Explorer는 이 웹 페이지의 로컬 복사본을 소위 임시 파일로 PC에 저장합니다. 이러한 파일이 너무 많고 이를 포함하는 폴더의 크기가 수 기가바이트에 도달하면 웹 페이지 표시에 문제가 발생할 수 있습니다. 즉, 스크립트 오류 메시지가 나타납니다. 임시 파일 폴더를 정기적으로 지우면 이 문제를 해결하는 데 도움이 될 수 있습니다.
임시 인터넷 파일을 삭제하려면 다음 단계를 따르십시오.

• 인터넷 익스플로러 11 열기
• 브라우저의 오른쪽 상단에서 아이콘을 클릭합니다. 서비스기어 형태(또는 키 조합 Alt + X). 그런 다음 열리는 메뉴에서
• 창에서 탭으로 이동합니다. 흔하다
• 장에서 브라우저 기록버튼을 누르십시오 삭제…

• 창에서 검색 기록을 삭제항목 옆의 상자를 선택하십시오. 인터넷 및 웹사이트의 임시 파일, 쿠키 및 웹사이트 데이터, 잡지
• 버튼을 클릭 삭제

바이러스 백신 소프트웨어 작동

스크립트 오류는 페이지의 활성 스크립트, ActiveX 및 Java 컨트롤 또는 임시 브라우저 파일을 저장하는 폴더를 차단할 때 바이러스 백신 프로그램의 작동을 통해 발생할 수 있습니다. 이 경우 설치된 안티바이러스 제품의 설명서를 참조하여 임시 인터넷 파일을 저장하기 위한 폴더 검색 및 대화형 개체 차단을 비활성화해야 합니다.

HTML 페이지 코드의 잘못된 처리

일반적으로 특정 사이트에 나타나며 페이지 코드가 Internet Explorer에서 작동하도록 완전히 조정되지 않았음을 나타냅니다. 이 경우 브라우저에서 스크립트 디버깅을 비활성화하는 것이 가장 좋습니다. 이렇게 하려면 다음과 같이 하십시오.

• 인터넷 익스플로러 11 열기
• 브라우저의 오른쪽 상단에서 아이콘을 클릭합니다. 서비스기어 형태(또는 키 조합 Alt + X). 그런 다음 열리는 메뉴에서
• 창에서 탭으로 이동합니다. 추가적으로
• 다음으로 체크박스를 선택 취소합니다. 모든 스크립트 오류에 대한 알림 표시그리고 버튼을 누르세요 좋아요.

이것은 Internet Explorer에서 스크립트 오류를 ​​일으키는 가장 일반적인 이유 목록이므로 그러한 메시지에 지쳤다면 약간의주의를 기울이고 문제를 한 번에 해결하십시오.

물론 다른 것도 있습니다. 확실히 언급하겠습니다.

Firefox용 방화범

나는 확실하지 않다. 개똥 벌레다른 개발자 도구의 시조이지만 확실히 가장 인기 있고 사용자 친화적이며 기능이 풍부한 .

Firebug는 Firefox용 애드온이므로 Firefox 애드온 사이트에서 다운로드하여 설치해야 합니다.

방화범을 호출하려면 F12를 누르십시오.

이 부가 기능의 기능:

• 동적으로 변경되는 HTML 검사 및 편집
• 즉석에서 CSS 편집;
• JavaScript 디버깅, 스크립트 실행을 위한 명령줄
• 네트워크 요청 모니터링 - 파일 및 스크립트, 요청 헤더의 크기와 다운로드 시간을 볼 수 있습니다.
• DOM 파서.

이 기능에 대해 오랫동안 자세히 이야기 할 수 있지만 모든 독자에게 알려져 있다고 생각하며 그렇지 않은 경우 자세한 정보는 Firebug 홈페이지에 있거나 Ilya Kantor가 번역 한 것과 동일합니다.

방화범 자체 외에도 유용한 로션이 필요할 수 있습니다. 파이어쿠키, (놀랍게도:-) 쿠키를 보고 수정할 수 있습니다.

Firefox용 웹 개발자 도구 모음

Ognelis에 또 다른 유용한 추가 기능입니다. 다음과 같습니다.

포인트를 살펴보겠습니다.

장애를 입히다

JavaScript를 끄고, 개발에 매우 ​​유용한 캐시 사용을 비활성화하고(페이지가 최신 업데이트로 로드되었는지 확인할 수 있음), 페이지에 사용된 색상을 취소하고 표준 색상으로 교체할 수 있습니다. 리퍼러 헤더(전환이 시작된 페이지)에서 전송을 비활성화합니다.

쿠키

쿠키 작업에 유용한 옵션: 쿠키를 보고, 삭제하고, 차단하고, 추가할 수 있습니다.

CSS

이 메뉴에는 개발자 도구 모음의 가장 멋진 기능인 즉석 CSS 편집 기능이 있습니다. 또한 css 보기, 비활성화 등이 가능합니다. 제 생각에는 여기에서 키보드 단축키의 존재가 매우 유용합니다(예를 들어 CTRL + SHIFT + C를 사용하면 페이지 스타일 보기로 즉시 이동할 수 있음).

양식

양식 작업을 위한 모든 것: 암호 표시, 양식에 대한 정보 표시, 양식 메소드 변환(GET » POST 및 그 반대) 등. 양식 필드를 자동으로 채우는 유용한 기능인 "양식 필드 채우기"(예: 암호 기억 기능이 비활성화된 상태에서 사이트를 테스트할 때). 그렇지 않으면 이 단락에서 유용한 내용이 보이지 않습니다.

이미지

이미지를 끄는 유용한 기능이 있어 이미지 없이 사이트가 어떻게 보이는지 확인할 수 있습니다. 사진에 동그라미를 치고 크기를 표시하고 대체 속성을 표시할 수 있습니다.

정보

이 메뉴에는 많은 옵션이 있습니다. 페이지에 class 및 id 속성을 표시하는 것이 유용할 수 있습니다. 또한 페이지에서 사용되는 색상에 대한 정보를 빠르게 얻을 수 있는 "색상 정보 보기" 항목이 흥미롭습니다. "문서 크기 보기" - 페이지 크기 보기. "응답 헤더 보기" - 페이지 헤더를 봅니다.

여러 가지 잡다한

가장 일반적으로 사용되는 기능은 캐시 지우기입니다. 또한 "페이지 눈금자" - 눈금자, "페이지 돋보기" - 돋보기 및 "선 안내선" - 템플릿을 다듬는 데 유용할 수 있는 몇 줄을 여기에서 사용할 수 있습니다.

개요

테이블, 제목, 링크, 프레임, 블록 등 다양한 페이지 요소 선택. 크기 조정을 사용하면 표준 화면 확장에 맞게 브라우저 창의 크기를 조정할 수 있습니다. 여기서 도구는 페이지 유효성 검사를 위해 저장된 기능입니다. 로컬 및 외부 모두. HTML, CSS 등을 검증하기 위한 편리하고 빠른 액세스. CTRL+SHIFT+H 키보드 단축키를 사용하여 HTML을 확인할 수 있습니다.

소스보기

소스 코드를 봅니다. 외부 애플리케이션에서 볼 수 있는 기능, 생성된 코드 보기.

오른쪽이 제가 가장 좋아하는 것입니다. 빠른 HTML, CSS 유효성 검사기 및 JavaScript 오류 표시기입니다. 문제가 없으면 아이콘이 녹색이고 문제가 있으면 빨간색입니다.

Internet Explorer 개발자 도구 모음

8.0부터 오류 디버그가 이미 이 브라우저에 내장되어 있습니다. 쉽게 불려요 F12 키. 사실 그는 90년대 프로그램으로서는 비참하다.

그러나이 브라우저에는 훨씬 더 멋진 도구가 있으며 소위 Internet Explorer 개발자 도구 모음은 링크에서 다운로드할 수 있습니다.

물론이 도구 모음은 외관상 방화범처럼 보이지만 아쉽게도 아직까지 성장하지 않았습니다. 반면에 Firebug에는 없는 몇 가지 기능이 있습니다. 나는 Internet Explorer Developer Toolbar를 Firebug와 파이어폭스 웹 개발자도구 모음.

방화범처럼 간단한 클릭으로 요소를 검사할 수 있습니다. 그러나 패딩과 여백을 즉시 볼 수 있다면 여기에는 그런 가능성이 없습니다.

또한 Internet Explorer 개발자 도구 모음은 Firebug처럼 요소 트리를 동적으로 업데이트하지 않습니다. 즉, js를 사용하여 페이지에서 무언가를 변경하면 이 도구 모음을 사용하여 아무것도 볼 수 없습니다.

즐길 수 있는 것부터 즉석에서 CSS 변경(해킹할 항목을 쉽게 찾을 수 있는 방법 :), CSS 및 이미지를 비활성화하는 기능, 캐시를 빠르게 지우고 쿠키로 재생하는 기능, 유효성 검사에 대한 빠른 액세스.

가장 맛있는 기능: 스포이드를 사용하여 페이지에서 원하는 색상을 얻을 수 있는 내장 색상 선택기가 있습니다. (ff의 경우 별도의 ColorZilla 플러그인이 있습니다).

Internet Explorer용 디버그 디버그 표시줄

주어진 링크에서 Internet Explorer용 DebugBar를 다운로드할 수 있습니다.

그 자체로 흥미로운 확장입니다. 브라우저에 추가 패널로 설치됨:

어떤 이유로 내장 검색 엔진, 스포이드, 창 크기 조정 기능, 그리고 어떤 이유로 비누를 위해 친구에게 페이지를 보내는 기능이 있습니다. 유용할 수도 있지만. 그러나 나는 이 기회를 활용하지 못했다.

또한 검사관이 있습니다.

클릭하거나 포인팅하여 검사하는 방법은 개발자에게 적합하지 않았습니다. 그들은 더 흥미로운 것을 생각해 냈습니다. DebugBar에서 대상을 원하는 요소로 드래그해야 트리에서 볼 수 있습니다. CSS를 편집할 수 있는 옵션이 없습니다. 그러나 유효성 검사기와 내장 js 콘솔이 있습니다.

그리고 설정을 파헤쳐 보면 다음을 찾을 수 있습니다.

재미 있고 슬프다.

8번째 익스플로러에는 개발자 툴바가 내장될 것으로 알려졌다. 세 번째 단락에서 설명한 것과 비슷하지만 더 나아지기를 바랍니다.

Opera용 DragonFly 디버그

DragonFly는 버전 9.5부터 Opera에 내장되어 있으므로 설치할 필요가 없습니다. Dragonfly를 활성화하려면 도구 → 고급 → 개발자 도구로 이동합니다. 그리고 영어라면 도구 → 고급 → 개발자 도구.

DragonFly가 Alpha2 단계에 있음을 즉시 경고합니다. 이것은 많은 결함을 설명합니다.

기능 목록:

• DOM 검사자;
• 검사를 클릭합니다(다시 말하지만 FireFox에서처럼 패딩이 표시되지 않습니다).
• 편집 중 ;
• 오류 콘솔에 빠르게 액세스합니다.

DF는 프레임의 별도 페이지와 같습니다. 열면 방화범과 달리 모든 탭에 대해 열립니다. 따라서 요소를 검사하기 전에 목록에서 보려는 페이지를 선택해야 합니다.

불행하게도 여기서 Internet Explorer에서와 같이 Dav 도구 모음은 동적으로 생성된 요소를 표시하지 않습니다. 그리고 일반적으로 페이지를 검사할 때 JavaScript가 실행되지 않습니다. 링크와 버튼이 클릭되지 않습니다. DragonFly가 출시될 때 이러한 모든 기능을 볼 수 있기를 바랍니다.

Safari에서 WEB 검사기 디버그

브라우저에 대해 바로 말할 것입니다 원정 여행나는 정보를 휘파람을 불었으므로 그들이 말했듯이 자료의 적절성에 대해 책임지지 않습니다.

Safari 메뉴에서 "개발" 항목을 활성화하려면 설정("고급" 탭)에서 해당 항목을 활성화해야 합니다.

"개발" 메뉴에서 다음 기능을 사용할 수 있습니다.

WEB 인스펙터를 자세히 살펴보겠습니다.

기본적으로 인스펙터는 HTML 보기 모드에서 열립니다. 그러나 DOM 보기 모드로 전환할 수 있습니다. 이를 위해 상단 플레이트에 스위치가 있습니다. 인스펙터에서 요소 위로 마우스를 가져가면 페이지 자체에서 강조 표시됩니다. FireBug에서 볼 수 없는 것처럼 패딩을 보거나 마크업 또는 CSS를 즉시 변경하거나 DOMe에 대한 동적 변경을 즉시 볼 수 없습니다. 하지만 보시다시피 아주 멋져 보입니다.

브라우저 창에서 인스펙터로 작업하려면 왼쪽 하단 모서리에 있는 버튼을 클릭하면 됩니다.

Safari에서도 "네트워크 타임라인"과 같은 기능을 사용할 수 있습니다(검사기의 "네트워크" 버튼).

파일이 로드되는 시기와 시간을 명확하게 확인할 수 있습니다. 요청 헤더도 볼 수 있지만 콘텐츠 자체는 볼 수 없습니다.

Google Chrome의 개발자를 위한 디버그

Lame은 진보된 형태로 태어났고 지금은 비뚤어졌지만 여전히 개발자를 위한 도구를 즉시 갖게 되었습니다.

• DOM 검사기;
• 자바스크립트 디버거;
• 자바스크립트 콘솔.

요소를 검사하려면 요소를 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서 "요소 코드 보기"를 선택하십시오.

기능은 Safari와 동일합니다. 마우스를 올리면 요소가 강조 표시되지만 CSS 및 HTML 편집을 사용할 수 없으며 DOM의 변경 사항이 추적되지 않습니다. 단, 인스펙터를 브라우저 창에 연결해야 하는 왼쪽 하단의 버튼이 작동하지 않습니다.

"리소스" 탭에서 다음을 볼 수 있습니다.

사파리의 규모와 약간 다릅니다. 이 다이어그램에서 반투명은 상대적인 파일 크기이고 전체 색상은 다운로드 시간입니다. 어떤 식으로든 크롬의 이 부분은 아직 완성되지 않은 것이 분명합니다.

이 기사에서는 가장 유명한 브라우저용 확장 기능과 기본 제공 도구를 검토했습니다.

예를 들면 다음과 같습니다.

• Internet Explorer WEB Development Helper는 ASP.NET 개발자(Internet Explorer)를 위한 좋은 도우미입니다.
• 웹 개발자 도구 모음 - Internet Explorer 및 FireFox용 도구 모음입니다. 몇 가지 유용한 기능이 있습니다.
• 웹 접근성 도구 모음 - Internet Explorer용 도구 모음입니다. 흥미로운 것은 없습니다.

내가 언급하지 않았지만 그만한 가치가 있는 추가 기능이 있거나 내가 놓친 언급된 확장 기능이 있는 경우 작성하십시오.

건강에 사용!

Windows 8.1 및 Windows 7의 Internet Explorer 11에는 개발자가 여러 장치에서 최신 웹 사이트 및 앱을 생성, 진단 및 최적화할 수 있도록 브라우저에 내장된 완전히 새롭게 디자인되고 향상된 개발자 도구 세트가 함께 제공됩니다. 간결함을 위해 간단히 F12라고 부르는 새로운 도구를 사용하면 웹 개발자가 빠르고 효율적으로 작업할 수 있습니다.

Visual Studio 및 Internet Explorer 작업 그룹은 의미 있는 데이터를 사용하여 개발자가 문제에서 솔루션으로 빠르게 이동할 수 있도록 돕는 원칙을 기반으로 하는 F12 도구를 만들기 위해 협력했습니다. 새로운 F12 제품군은 성능 문제를 진단하고 수정하는 도구와 Internet Explorer가 웹 응용 프로그램을 배치하고 렌더링하는 방법을 더 잘 이해할 수 있도록 도와주는 도구를 통해 빠르고 유연한 웹 경험을 제공합니다. F12 도구는 오늘날의 웹 개발자가 사용하는 빠른 대화형 워크플로를 지원합니다.

범용 도구 세트

새로운 F12 세트는 개발자가 문제에서 솔루션으로 빠르게 이동할 수 있도록 도와줍니다. 흥미로운 새 기능 중 일부는 다음과 같습니다.

• 개발자가 빠르고 유연한 웹 애플리케이션을 구축하는 데 도움이 되는 UI 응답 분석 및 메모리 프로파일링 도구입니다.
• 개발자가 동적 콘텐츠가 레이아웃과 스타일에 미치는 영향을 대화형으로 탐색할 수 있도록 페이지와 함께 업데이트된 Live DOM Explorer 및 CSS 검사기
• 개발자가 더 빠르게 작업할 수 있도록 페이지를 새로 고치지 않고 빠르게 실행되는 JavaScript를 디버깅하는 기능

F12 도구를 사용하면 빠른 대화형 워크플로를 달성하는 데 도움이 되는 다른 많은 개선 사항을 확인할 수 있습니다.

• "검사 항목"이 있는 메뉴 항목을 마우스 오른쪽 버튼으로 클릭하여 이러한 도구에 빠르게 액세스
• 효율적인 키보드 상호 작용
• 도구에서 요소 및 구성 요소를 복사하여 추가 형식 지정 없이 모든 편집기에 붙여넣을 수 있는 광범위한 기능

가장 중요한 것은 이제 이러한 도구가 DOM Explorer의 @media 및!important 규칙에서 UI Response Profiler의 요소당 비용 구조에 이르기까지 사용 가능한 가장 완전하고 정확한 정보를 표시한다는 것입니다. 이러한 도구는 또한 직접적으로 의미 있는 데이터를 제공합니다. 예를 들어 메모리 프로파일러는 "라이브"이지만 마크업이나 렌더링 트리에서 참조되지 않는 DOM 노드를 식별합니다.

새로운 F12 제품군의 기능은 Visual Studio에서도 사용할 수 있으므로 개발자는 모든 웹 개발 도구 및 플랫폼에서 일관되고 원활한 환경을 경험할 수 있습니다.

이제 이러한 도구의 작동 방식을 간단히 살펴보겠습니다.

UI 응답성 분석기로 애플리케이션 프로파일링

UI 응답성 도구는 애플리케이션이 최대 성능 잠재력을 달성할 수 있도록 CPU 시간이 소비되는 위치를 이해하는 데 도움이 됩니다. 이 도구는 HTML, CSS 및 JavaScript 코드의 런타임 시각화와 마크업 및 가비지 수집과 같은 중요한 부작용을 제공하여 Internet Explorer의 내부 작동을 이해하는 데 필요한 통찰력을 제공합니다. 한눈에 앱의 반응 속도와 렌더링 방식을 정확히 확인할 수 있습니다. 이렇게 하면 특정 소스를 식별할 수 있습니다. 병목 현상최적화에 대한보다 지능적인 접근 방식.

웹사이트 프로파일링

메모리 프로파일러로 애플리케이션 메모리 사용량 분석

이 메모리 분석기는 메모리 누수 또는 과도한 메모리 소비를 방지하는 데 도움이 됩니다. 24시간 클라이언트를 위해 작동하거나 복잡한 웹 애플리케이션 생성 대화형 애플리케이션종종 개발자가 메모리 사용 문제에 특별한 주의를 기울여야 함을 의미합니다.

JavaScript는 가비지 수집 환경이지만 응용 프로그램은 일반적으로 개체 참조가 해제되지 않았거나 해제될 수 없기 때문에 일반적으로 더 많은 메모리를 사용합니다. 메모리 분석기는 JavaScript 개체든 DOM이든 페이지의 모든 개체에 대한 정보를 제공하여 이러한 문제를 식별하는 데 도움이 됩니다. 이 정보를 통해 예를 들어 요소가 보유한 메모리 양을 확인할 수 있습니다. 지속성을 지원하는 개체는 무엇입니까? 그러나 가장 중요한 것은 두 개의 스냅샷을 비교하고 무엇이 변경되었는지 확인할 수 있다는 것입니다. 이를 통해 애플리케이션이 더 많은 메모리를 사용하게 된 이유를 이해하고 이 상황을 수정할 수 있습니다.

비활성화된 DOM 요소를 보여주는 힙 스냅샷

성능 대시보드로 애플리케이션 성능을 빠르게 이해하십시오.

페이지 성능에 영향을 미치는 문제를 신속하게 식별할 수 있도록 Internet Explorer 11은 키보드 단축키 Ctrl+Shift+U 또는 해당 도구 메뉴 항목( Alt+T ). 이 패널은 렌더링 시간, 메모리, 초당 프레임 수(fps) 및 CPU 사용량과 같은 주요 성능 지표에 대한 통계를 Internet Explorer에 동적으로 표시합니다. 성능 대시보드는 F12 도구를 사용할 필요가 없으며 최신 브라우저에서도 사용할 수 있습니다.

성능 대시보드를 사용하면 프레임 속도 저하 또는 높은 CPU 사용량을 유발하는 페이지 상호 작용을 빠르게 식별할 수 있습니다. 그런 다음 F12로 전환하여 문제를 재현하고 해결책을 찾을 수 있습니다.

DOM 탐색기를 사용하여 요소 검사 및 마크업 및 스타일 수정

DOM 탐색기를 사용하면 @media 쿼리와 CSS 규칙 및 해당 속성을 대화식으로 쉽게 설정할 수 있습니다. 그래서 사용자 인터페이스귀하의 애플리케이션은 응답성이 뛰어난 다중 장치 인터페이스가 됩니다. 원하는 요소를 마우스 오른쪽 버튼으로 클릭하고 검사하여 웹 페이지에서 빠르게 시작할 수 있습니다. 그러면 DOM 탐색기에서 선택한 해당 요소와 함께 F12 도구가 실행되어 DOM 및 적용된 CSS 규칙이 동적으로 표시됩니다. 렌더링된 DOM 및 CSS 테이블은 동적이므로 Internet Explorer가 마크업, CSS 스타일 및 규칙의 특수성을 해석하는 방법을 이해할 수 있습니다. DOM 탐색기를 사용하여 페이지와 상호 작용하거나 페이지를 수정하면 변경 사항이 즉시 표시됩니다.

마크업 및 스타일 확인

DOM 탐색기를 사용하면 CSS 테이블을 변경할 때 IntelliSense를 사용하여 속성의 올바른 값을 쉽게 얻을 수 있습니다. 어떤 속성이 잘못되었거나 인식되지 않는지 쉽게 확인한 다음 규칙을 복사하여 소스에 다시 적용할 수 있습니다.

디버거 및 콘솔을 사용하여 JavaScript 디버깅

새로운 JavaScript 디버거는 신뢰할 수 없는 코드를 찾아 신속하게 수정할 수 있는 도구를 제공합니다. JavaScript 디버거는 스크립트 라이브러리가 축소된 경우에도 여러 파일을 열고 볼 수 있으며 중단점 및 추적점을 설정하고 JavaScript 개체, 값, 범위 체인을 검사하고 스택의 내용을 볼 수 있습니다. F12 도구를 실행하면 JavaScript 디버거도 즉시 시작되므로 바로 시작할 수 있습니다.

디버깅하는 동안 웹 사이트와 상호 작용하고 싶을 것입니다. 콘솔은 이 작업의 핵심 도구입니다. 언제든지 콘솔에 액세스할 수 있으므로 IntelliSense 및 개체 렌더러와 함께 이 대화형 환경을 효율적으로 사용할 수 있습니다. 콘솔은 또한 출력을 기록하고, 특정 코드에 소요된 시간을 분석하고, JavaScript 개체를 심층적으로 검사해야 할 때 개체 렌더러를 제공할 수 있는 광범위한 특수 API를 제공합니다.

합산

이 블로그 게시물에는 F12 도구의 새 요소에 대한 설명 스케치가 포함되어 있습니다. 당신은 찾을 수 있습니다 전체 목록새로운 기능"F12 도구의 새로운 기능" 문서 및 "Internet Explorer 11 미리 보기 개발자 가이드"에서 Internet Explorer 11의 개발자가 사용할 수 있습니다. Internet Explorer 테스트 데모 "F12 Adventure"에서도 자세한 내용을 확인할 수 있습니다.

여러분의 피드백을 기다리고 있으며 개발자 커뮤니티와의 오랜 협력을 기대합니다. Internet Explorer 11 또는 Connect 사이트의 피드백 및 제안 도구를 통해 제안 사항을 공유하십시오.

P. J. 허프
, Visual Studio 부사장