이 기사는 개발자 도구의 다양한 메뉴를 간략하게 설명했습니다. 모든 사람 이이 강력한 도구를 쉽게 사용할 수 있다고 생각합니다.
IE8 개발자 도구 사용에 대한 자세한 설명 (모든 수준에서 메뉴에 대한 자세한 설명)
IE8의 공식 버전이 출시되었습니다. 이 기사는 매우 말도 안되는 말로 언급하지 않았으며 Chrome은 IE8의 15 배인 JavaScript를 실행할 수 있다는 결론을 내릴 것입니다. IE8은 Safari보다 2.456 배, IE8은 Firefox보다 1.235 배 높습니다. 내가 누구보다 누구보다 낫다. 내가 아는 전부 : Windows 7이 출시되면 IE8 브라우저의 시장 점유율은 프론트 엔드 개발자에게 말할 수 없게 만들 것입니다. IE8에 대해 걱정하지 마십시오. 따라서이 기사는 매우 실용적으로 설명 할 것입니다. IE8은 개발자가 친절하다고 느끼게하는 유일한 개발자 도구 일 수 있습니다. 동시에 관련 정보와 지식을 확장 할 것입니다. 따라서 IE8에 대한 편견을 버리고 참을성있게 지켜보십시오.
IE8이 아직 설치되지 않았습니까?
프론트 엔드 개발자 인 경우이 작업을 설치하십시오. 공식 버전이 출시 되었기 때문입니다. 이전 베타 버전과 달리 이번에는 심각하게주의를 기울여야합니다. 다운로드하여 설치하십시오. 다음은 다운로드 주소입니다.
IE8 중국어 버전 다운로드 목록
Windows XP
Windows Vista
Windows Server 2003
Windows Server 2008
Windows XP 64 비트
Windows Vista 64 비트
Windows Server 2003 64 비트
Windows Server 2008 64 비트
IE8 영어 버전 다운로드 목록
Windows XP
Windows XP 64 비트
Windows Vista
Windows Vista 64 비트
Windows Server 2003
Windows Server 2003 64 비트
Windows Server 2008
Windows Server 2008 64 비트
아, 아마도 시스템의 IE6 또는 IE7이 끝났다고 걱정할 것입니다. 예, 실제로 가능합니다. 그러나 다음 도구를 시도 할 수 있습니다. 여러 버전의 IE -IETester의 공존을위한 여러 버전의 IE 솔루션과 공존 할 수 있습니다.
Superpreview (다운로드 포함)
개발자 도구를 충족하십시오이 것은 유행 이름이 바뀌었지만 새로운 것이 아닙니다. 전임자는 iedevtoolbar였습니다. 그러나 IE의 플러그인 일뿐입니다. IE8에서 브라우저는이 제품을 자동으로 통합하여 약간 소박한 이름을 변경했을뿐만 아니라 많은 기능을 향상시킵니다.
IE8의 도구 메뉴에서 개발자 도구를 호출하거나 F12 바로 가기 키를 직접 클릭 할 수도 있습니다.
소개하기 전에이 일이 무엇을 할 수 있는지 이야기 해 봅시다. 브라우저를 사용하여 웹 사이트를 탐색하는 경우 페이지 제작 방법에 대해 걱정하지 않습니다. 그런 다음이 페이지를 떠날 수 있다고 생각합니다.
전반적으로 개발자 도구는 프론트 엔드 개발자가 페이지를 개발할 수 있도록 설계된 도구입니다. HTML 코드, CSS 코드 및 JavaScript 코드를 포함하여 페이지 버그를 쉽게 찾을 수있는 일련의 가제트를 제공합니다. 동시에, 그는 또한 쓸모가 없지만 색상 피킹, 스크린 눈금자 등과 같은 냄새를 흘릴 수있는 작은 도구를 제공합니다.
좋아, 우리는 그것을보고 그것이 무엇을 할 수 있는지 알고 있습니다. 그런 다음 메뉴의 순서에 따라 하나씩 소개하겠습니다.
이 기사는 개발자 도구의 다양한 메뉴를 간략하게 설명했습니다. 모든 사람 이이 강력한 도구를 쉽게 사용할 수 있다고 생각합니다.
【파일. 메뉴【모든 취소 all
개발자 도구에서 수행 된 모든 작업이 취소되었고 페이지 및 DOM 구조가 새로 고쳐졌습니다.
Custom Internet Explorer 시도 소스】
【소스를 시도하는 것】 얼마나 빌어 먹을 명사. 간단한 방식으로 : 웹 소스 파일을 보는 데 사용하는 편집기입니다. 예를 들어 : EditPlus를 사용하고 있습니다.
【그만두다】
당신의 IQ를 모욕하지 않기 위해, 나는 이것에 대해별로 말하지 않을 것입니다. F12는 Parity Shortcut 키입니다. 그런데 이것을 언급합시다.
【메뉴를 찾으십시오
요소를 선택하려면 클릭하십시오
바로 가기 키 CTRL B는 그림에서 마우스 ICO 버튼을 클릭하는 것과 동일한 효과를 갖습니다. 가장 일반적으로 사용되는 기능. 또한 패리티 스위치입니다. 열 때 마우스를 사용하여 페이지의 요소를 클릭하면 수정 된 요소가 선택되고 DOM 구조, CSS 스타일 및 수정 된 요소의 기타 정보가 나열됩니다.
예를 들어 위의 그림입니다. 왼쪽의 영역은이 하이퍼 링크 요소의 DOM 정보를 보여줍니다. 부모, 자녀 및 형제 자매 요소는 명확하게 볼 수 있습니다.
오른쪽 영역은 요소 스타일 정보를 보여줍니다. 라인으로 교차하는 스타일은 우선 순위가 충분히 높지 않기 때문에 스타일이 더 이상 작동하지 않음을 의미합니다. 디버깅 중에 이전 후크를 연결할 수 있습니다. 연결되면이 스타일이 삭제되어야 함을 의미합니다. 또한, 마우스를 클릭 한 후 즉시 각 스타일의 특성을 수정할 수 있습니다. 이것은 매우 편리한 수정 된 페이지 효과를 즉시 볼 수 있습니다.
Firefox의 Firebug를 사용한 친구들은 이것에 익숙해야합니다. 유일한 차이점은 다음과 같습니다. Firebug는 아래에서 우선 순위가 낮은 스타일을 정렬합니다.
[추적 스타일] 및 [스타일]보기의 기능은 동일하며 선택한 요소의 스타일 정보를 보는 데 사용됩니다. 유일한 차이점은 다음과 같습니다. 시청 방법을 변경했습니다. 당신의 습관에 대한 구체적인 견해는 자신의 선호도에 달려 있습니다.
이 기사는 개발자 도구의 다양한 메뉴를 간략하게 설명했습니다. 모든 사람 이이 강력한 도구를 쉽게 사용할 수 있다고 생각합니다.
[레이아웃]보기는 선택한 요소의 박스형 모델 정보를 표시 할 수 있습니다. FireBug보다 더 많은 정보를 표시 할 수 있지만 FireBug의 색상 블록으로 페이지에서 직접 표현하는 방법을 여전히 선호합니다.
[속성]보기는 선택한 요소의 속성 정보를 볼 수 있습니다. 매우 만족 스럽습니다. 페이지를 신속하게 디버깅하기 위해 일부 속성을 즉시 추가하거나 삭제할 수 있습니다.
아, 맞아. 개발자 도구에서 선택한 요소의 스타일 또는 속성을 수정하든 임시 디버깅 일뿐 아니라 웹 페이지 소스 코드를 수정하지는 않습니다.
【메뉴를 비활성화합니다
【스크립트】
페이지의 JavaScript 또는 VBScript 스크립트는 금지됩니다. 왜 비활성화합니까? 페이지의 견고성을 테스트합니다. Page Design에 대한 요구 사항이 높은 일부 고객은 다음과 같이 묻습니다. 고객이 스크립트를 비활성화하는 경우이 페이지를 여전히 사용할 수 있습니까? 그렇습니다.이 기능은이 빌어 먹을 고객의 왜곡 된 요구를 테스트하는 데 사용됩니다.
【팝업 윈도우 차단기】
팝업 창에 필터링하십시오. 브라우저 나 보안 소프트웨어를 내 팝업 창을 필터링 할 수있는 것을 테스트하는 데 사용됩니다.
CSS s
CSS 누드 페스티벌이오고 있습니다! 이것을 사용하여 CSS에서 알몸으로 실행할 때 페이지의 자세를 테스트하십시오. 이것은 또한 페이지의 견고성과 접근성을 확인하는 중요한 테스트입니다. 그러나 현재 중국의 웹 페이지에 액세스 할 수있는 맹인은 많지 않습니다.
이 기사는 개발자 도구의 다양한 메뉴를 간략하게 설명했습니다. 모든 사람 이이 강력한 도구를 쉽게 사용할 수 있다고 생각합니다.
【보기. 메뉴【수업 및 ID 정보 and
바로 가기 키는 Parity Switch 인 Ctrl I입니다. 그것을 열면 페이지가 조밀 한 빨간색 블록으로 덮여 있음을 알 수 있습니다. 클래스 이름 또는 ID 이름이 표시됩니다. 예, 이것은 클래스 및 ID 정보를보기의 효과입니다. 그러나 솔직히 말해서 누가이 붉은 의자에 관심이 있습니까? 이 페이지는 패치로 가득 찬 거지의 옷처럼 보일뿐만 아니라 그것을 완전히 알지 못합니다 -_- B ...
【링크 경로】
위와 동일합니다. 페이지의 모든 하이퍼 링크를 빨간색으로 상자에 넣고 링크 주소를 표시합니다.
【링크 보고서】
링크 보고서 기능을 사용하여 개발자 도구를 사용하면이 페이지의 링크 보고서를 생성하는 데 도움이됩니다. 링크 수, 링크 주소, 새 창이 열려 있는지 등과 같은 정보가 포함되어 있지만이 사용은 무엇입니까? 나도 모르겠어요.
【탭 색인】
tabindex 속성을 포함하는 모든 요소를 강조 표시하십시오. tabindex 속성의 설정은 웹 페이지 요소가 초점을 맞추는 순서를 변경할 수 있습니다.
이 기사는 개발자 도구의 다양한 메뉴를 간략하게 설명했습니다. 모든 사람 이이 강력한 도구를 쉽게 사용할 수 있다고 생각합니다.
【액세스 키】
액세스 키 속성을 포함하는 모든 요소를 강조 표시하십시오. 액세스 키 속성을 설정하여 초점을 얻기 위해 요소의 바로 가기 키를 설정하십시오.
【소스 파일】 스타일의 요소 소스
선택한 요소 스타일, HTML 코드 및 웹 레벨 정보가 포함 된 소스 파일을 생성합니다.
이 명령이 유효하기 전에 요소를 선택해야합니다. 또한 생성 된 소스 파일은 선택된 요소 와만 관련됩니다.
【소스 파일】 Dom (요소)
바로 가기 키는 Ctrl T입니다. 소스 파일을 생성합니다. 이 소스 파일에는 선택한 요소에 대한 DOM 구조 정보 만 포함됩니다. Firebug를 사용한 친구는 명령 사본 요소 HTML 코드를 생각할 수 있습니다. 실제로 이것은 그것과 비슷합니다. 이것은 단지 창에 생성되며 Firebug는 클립 보드에 직접 복사됩니다.
【소스 파일】 DOM (페이지)
바로 가기 키 Ctrl G. 소스 파일을 생성합니다. 이 소스 파일에는 전체 페이지의 DOM 정보 구조가 포함되어 있습니다. 매우 빌어 먹을 기능입니다. 버그 때문인지 모르겠습니다. 이 기능은 실제로 웹 페이지 소스 코드를 보는 것입니다. 생성 된 소스 코드는 DOM 정보뿐만 아니라 CSS 및 스크립트 정보이기 때문입니다.
file 소스 파일의 원래 상태】
매우 빌어 먹을 기능은 실제로 웹 페이지 소스 코드를 보는 것입니다. 모든 사람은 오른쪽 마우스 버튼을 사용하여 웹 페이지에서 직접 클릭해야합니다.
【개요】 메뉴[개요] 메뉴는 분명히 조건을 충족하고 표시하는 요소를 개요하는 명령입니다.
【테이블 셀】
양식 테이블의 각 셀을 주황색 와이어 프레임 으로 구성하는 것입니다. 알려주세요. 이것이 테이블의 셀임을 알 수 있습니다.
【표면】
오렌지 와이어 프레임 으로 양식을 프레임하는 것입니다. 알려주세요. 이것은 형태 형태라는 것이 밝혀졌습니다.
【div 요소 ements
페이지의 모든 div 요소에 녹색 와이어 프레임을 사용하는 것입니다. 알려주세요. 이것들은 div 요소라는 것이 밝혀졌습니다.
이 기사는 개발자 도구의 다양한 메뉴를 간략하게 설명했습니다. 모든 사람 이이 강력한 도구를 쉽게 사용할 수 있다고 생각합니다.
【영상】
페이지의 모든 IMG 요소를 자주색 와이어 프레임 으로 구성하는 것입니다. 알려주세요. 이것들은 모두 IMG 요소라는 것이 밝혀졌습니다.
【모든 요소】
이것은 더 강력합니다. 라벨과 와이어 프레임을 사용하는 데 사용하려는 색상을 사용자 정의 할 수 있습니다. 이 메뉴를 클릭하면 아래 대화 상자가 나타납니다. 매우 간단합니다. 더 이상 설명이 없습니다.
positioning 요소 ing 상대
위치가있는 모든 요소 : 상대 스타일로 녹색으로 구성 됩니다.
【포지셔닝 요소 element 절대
위치가있는 모든 요소 : 절대 스타일로 검은 와이어 프레임 으로 구성됩니다.
【위치 요소 element 고정
정적 스타일 인 위치를 가진 모든 요소로 파란색으로 구성 됩니다.
【포지셔닝 요소 element 플로트
노란색 와이어 프레임 , 플로트 스타일의 모든 요소로 구성됩니다.
【명확한 개요 line
Excel 테이블과 같은 다양한 색상의 라인으로 페이지가 만들어 졌을 때이 명령을 사용하여 모든 줄을 지울 수 있습니다.
이 기사는 개발자 도구의 다양한 메뉴를 간략하게 설명했습니다. 모든 사람 이이 강력한 도구를 쉽게 사용할 수 있다고 생각합니다.
【이미지. 메뉴분명히이 명령은 페이지의 다양한 그림을 제어합니다.
【이미지 비활성화 images
당신의 IQ를 모욕하지 않기 위해 나는 이것을 말하지 않을 것입니다. 설명해야 할 유일한 것은 IMG 요소뿐만 아니라 요소의 배경 이미지도 비활성화된다는 것입니다.
【이미지 크기 표시 size
아주 좋은 기능. 이미지 속성을 확인하지 않고 각 사진의 크기를 빠르게 알 수 있습니다. 물론, 장치는 픽셀입니다.
【이미지 파일 크기 표시 image
아주 좋은 기능. 이미지 속성을 확인하지 않고 각 사진의 파일 크기를 빠르게 알 수 있습니다. 물론, 장치는 바이트입니다.
【이미지 경로 표시 path
아주 좋은 기능. 이미지 속성을 확인하지 않고 각 이미지의 URL 경로를 빠르게 알 수 있으며 복사 할 수도 있습니다.
【표시 텍스트 표시 text
IMG 요소의 ALT 속성 텍스트를 표시 할 수 있습니다. 그건 그렇고 : 그림의 키워드를 쌓지 마십시오. 그렇지 않으면 SEO 전환 최적화로 쉽게 고려됩니다.
【이미지 보고서보기 report
페이지 수정을위한 자세한 이미지 보고서를 생성하십시오. 각 이미지에 대한 매우 자세한 정보가 포함되어 있습니다.
이 기사는 개발자 도구의 다양한 메뉴를 간략하게 설명했습니다. 모든 사람 이이 강력한 도구를 쉽게 사용할 수 있다고 생각합니다.
【캐시】 메뉴캐시 및 쿠키 메뉴 그룹을 관리하십시오. 이것은 개발자에게 매우 즐거운 기능이 될 것입니다.
【항상 서버에서 새로 고침
매우 심오한 명령처럼 보입니다. 다시 말해, 브라우저 캐시를 사용하는 것은 금지되어 있습니다.
Clear 브라우저 캐시】
바로 가기 키 Ctrl R. 할 말이 없으며, 이전 작업 단계를 단순화합니다.
메뉴에 [Clear Browser Cache] 뒤에 세 개의 점이 있다는 것을 알 수 없습니다. 이는이 메뉴를 클릭 한 후 대화 상자가 확인됩니다.
【이 도메인의 브라우저 캐시를 지우십시오.
바로 가기 키 Ctrl D. 할 말이 없습니다.이 도메인의 브라우저 캐시를 지우십시오.
【쿠키 비활성화 able
할 말이 없습니다. 비스킷이 허용되지 않았습니다.
【클리어 세션 쿠키 session
브라우저의 모든 쿠키를 지우십시오. 포럼과 커뮤니티가 다시 로그인하기를 기다리고 있습니다.
domain 도메인 쿠키 지우기】
이 도메인에서는 쿠키 만 제거합니다.
【쿠키 정보보기 cook
이 페이지에 포함 된 쿠키 정보를보십시오. 그것에 대해 생각조차하지 말고, 당신은 비밀번호를 얻지 못할 것입니다.
【도구. 메뉴일부 유용한 도구는 개발자 도구에 포함되어 있지만 다른 특수 관련 관련 도구보다 약간 약합니다. 그러나 비상 대응으로는 여전히 충분합니다.
【크기 조정】
매우 유용한 가제트. 브라우저 창을 관련 크기로 빠르게 조정할 수 있습니다. 이런 식으로 웹 해상도 호환성을 테스트하는 것이 훨씬 편리합니다.
【통치자 표시 er
간단한 통치자 도구. 길이, 거리 및 기타 정보를 측정하는 데 사용하십시오. 선의 색상을 변경할 수 있습니다. 여러 타이틀도 만들 수 있습니다. 너무 얇은 경우 돋보기 기능을 사용할 수 있습니다.
【컬러 피커 표시 color
간단한 색상 피킹 도구. 마우스를 클릭하여 색상을 선택하십시오. 그러나 개발자 도구에서 너무 간단한 작업 도구 상자 - ColorPic (ColorPic)의 또 다른 도구를 권장합니다.
이 기사는 개발자 도구의 다양한 메뉴를 간략하게 설명했습니다. 모든 사람 이이 강력한 도구를 쉽게 사용할 수 있다고 생각합니다.
【검증】 메뉴그것은 세상에서 분명히 피의 폭풍을 일으킬 것입니다 (갑자기 잊어 버린이 관용구를 상기시켜 준 Xiaoqi에게 감사합니다. 아마도 최신 무술 소설을 더 적게 읽었 기 때문에 헐떡 거리는 것과 리안과 같은 관용구에 익숙한 것 같습니다). 가까운 시일 내에 수많은 Kong Yiji가 생산 될 것입니다.
html t
페이지의 HTML 코드를 확인하십시오. 이 페이지는 W3C의 HTML 검증 도구로 전송되며 확인 보고서가 얻어집니다.
CSS s
페이지의 CSS 코드를 확인하십시오. 이 페이지는 W3C의 CSS 검증 도구로 전송되며 확인 보고서가 얻을 것입니다.
【원천】
페이지의 소스 파일 코드를 확인하십시오. 이 페이지는 FeedValidator.org 확인 도구로 전송되며 확인 보고서가 얻을 것입니다.
【링크】
페이지에 대한 링크를 확인하십시오. 이 페이지는 W3C의 확인 도구로 전송되며 확인 보고서가 얻어집니다.
【지역 HTML】
로컬 페이지를 확인하려면 W3C의 HTML 검증 도구를 엽니 다.
【지역 CSS c
로컬 페이지를 확인하려면 W3C의 CSS 확인 도구를 열십시오.
【접근 기능】 wcag 목록
페이지의 WCAG를 확인하십시오 (웹 컨텐츠 접근성 보고서 페이지 접근성). 이 페이지는 contentquality.com 확인 도구로 전송되며 확인 보고서가 얻을 것입니다.
[접근 함수] 목록
Page 508 표준을 확인하십시오. 이 페이지는 contentquality.com 확인 도구로 전송되며 확인 보고서가 얻을 것입니다.
【다중 검증 ver
여러 사양을 확인하려면 페이지를 동시에 확인하십시오.
페이지 확인과 관련하여 몇 단어를 말하고 싶습니다. 실제로 페이지가 확인을 시작하기 전에 확인을 전달해야합니까? 나는 개인적으로 그것이 완전히 불필요하다고 생각합니다. 당신이 학생이라면, 아이보리 타워 안에 누워 있습니다. 고객이며 시간이 있기 때문에 언제든지 페이지를 던질 수 있습니다. 그러나 상업 프로젝트를위한 귀중한 프로젝트 자원을 낭비 할 필요는 없습니다. 고객이 귀하를 신경 쓰지 않기 때문에 내가 만든 페이지는 여러 측면에서 W3C에 의해 확인되었습니다. 실제로 관심을 가진 고객이 있다면, 나는 당신의 속임수 능력에 감탄한다고 말할 수 있습니다.
다음 에피소드를 계속 지켜봐 주시기 바랍니다 이 기사는 개발자 도구의 다양한 메뉴를 간략하게 설명했습니다. 모든 사람 이이 강력한 도구를 쉽게 사용할 수 있다고 생각합니다.그러나 우리는 더 강력한 기능을 전혀 언급하지 않았습니다. 모두 다음 기사를 기대하십시오. 다음 기사에서는 JavaScript 디버깅, 브라우저 모드, 텍스트 모드 및 기타 기능의 사용에 대해 자세히 설명합니다.