Chrome Developer Tools (튜토리얼)

Chrome Developer Tools 효과적으로 사용하기 (튜토리얼)

독일어

크롬 개발자 도구를 효과적으로 활용하기 (튜토리얼)

Chrome 개발자 도구를 사용하여 웹페이지를 분석하고 편집하며, 성능 분석을 수행하고 다양한 기기 및 화면 크기에서 웹페이지를 테스트할 수 있습니다. 이번 튜토리얼에서는 DevTools의 주요 기능들을 알아보세요. HTML, CSS 및 JavaScript에서 오류를 발견하고, 성능과 메모리 사용량을 최적화하는 방법을 찾고, 페이지 레이아웃을 개선하는 방법을 배울 수 있습니다. 교육가 스테판 하에스가 실제 예시를 통해 진행하는 방법을 보여줍니다!

크롬 개발자 도구의 주요 기능들을 배워보세요
HTML, CSS, 자바스크립트 코드 디버깅 및 최적화하기
코드 실행 흐름을 추적하고 오류를 찾아내고 수정하기
CSS-애니메이션, -스타일 및 -레이아웃을 조정
웹 페이지의 성능과 메모리 사용량을 향상시키다
오류 없이 빠르고 최적화된 레이아웃을 갖춘 웹사이트를 위한 스테판 하에스 트레이너의 6시간 이상의 강좌입니다

깨끗한 코드는 당신의 웹 사이트의 가시성에 많이 기여합니다. 지금 Chrome DevTools를 사용하여 페이지를 분석하고 최적화하는 방법을 배우세요.

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

세부 정보

내용: 6 h 비디오 교육
사용 허가: 개인 및 상업적 이용 권한

카테고리

웹디자인, CMS 및 개발

다음이 애정을 담아 제작했습니다:

Stephan Haewß

Chrome 개발자 도구 강좌 소개

무료

크롬 개발자 도구: 1.1 | 이 수업에서 무엇을 배우나요?

이 코스에서 다루는 모든 주제에 대한 개요가 제공됩니다.

텍스트 튜토리얼

무료

크롬 개발자 도구: 1.2 | 웹 애플리케이션 테스트 생성

첫 번째 웹 애플리케이션이 만들어지며 개발 도구를 사용하는 첫 단계가 설명됩니다.

텍스트 튜토리얼

무료

크롬 개발자 도구: 1.3 | 기능 개요

DevTools의 다양한 패널 및 기본 작동 방식 소개.

텍스트 튜토리얼

스타일링, 레이아웃, 외관은 Elements 탭을 통해 설정합니다

크롬 개발자 도구: 2.1 | Elements 탭에서 DOM 구조 검사

웹 사이트의 HTML 구조를 자세히 살펴보고 Elements- 탭에서 요소를 선택하고 편집하는 방법.

텍스트 튜토리얼

Chrome 개발자 도구: 2.2 | 스타일 변경

CSS 스타일의 실시간 편집 및 웹페이지 표시에 미치는 영향 조사.

텍스트 튜토리얼

크롬 개발자 도구: 2.3 | HTML, DOM 편집

HTML 구조 변경 및 DOM에 미치는 영향 관찰.

텍스트 튜토리얼

크롬 개발자 도구: 2.4 | 모바일 레이아웃 - 반응형 디자인 테스트

웹 사이트의 적응성을 시뮬레이션하고 여러 기기 크기를 확인합니다.

텍스트 튜토리얼

Chrome 개발자 도구: 2.5 | 실전 연습: 사이드 메뉴 고치기

페이지 메뉴에서 오류 수정.

텍스트 튜토리얼

Chrome 개발자 도구: 2.6 | 실전 연습: 레이아웃/오버플로우 수정

레이아웃 문제 및 오버플로 오류 해결.

텍스트 튜토리얼

스크립트 디버깅은 Sources와 Console을 통해 이뤄집니다

크롬 개발자 도구: 3.1 | Script 디버깅 소개 및 첫 번째 중단점 설정

Chrome Developer Tools: 3.1 | 소개: 스크립트 디버깅 및 첫 번째 중단점 설정

자바스크립트 코드 디버깅 및 브레이크포인트 설정 소개.

텍스트 튜토리얼

Chrome Developer Tools: 3.2 | 실습: TypeScript 앱 디버깅

TypeScript 코드를 개발 도구를 사용하여 디버깅하기.

텍스트 튜토리얼

Chrome Developer Tools: 3.3 | 실습: 디버깅 - 배열에서 삭제 오류 찾기

Chrome 개발자 도구: 3.3 | 실전 연습: 디버깅 - 배열 삭제 오류 찾기

배열에서 요소를 제거할 때 오류를 찾고 수정합니다.

텍스트 튜토리얼

Chrome Developer Tools: 3.4 | 실습: React 앱 디버깅

리액트 응용프로그램을 위한 특정 디버깅 기술.

텍스트 튜토리얼

크롬 개발자 도구: 3.5 | 조건부 중단점

특정 조건에서만 트리거되는 중단점 설정.

텍스트 튜토리얼

크롬 개발자 도구: 3.6 | DOM-중단점

특정 DOM 요소의 변경 사항을 감시합니다.

텍스트 튜토리얼

Chrome 개발자 도구: 3.7 | Fetch-Breakpoints

네트워크 요청 시 코드 일시 중지.

텍스트 튜토리얼

Chrome 개발자 도구: 3.8 | 예외-브레이크포인트

오류 발생 시 자동으로 일시 정지됩니다.

텍스트 튜토리얼

Chrome 개발자 도구: 3.9 | Overrides 및 Workspace

크롬 개발자 도구: 3.9 | Overrides와 Workspace

원본 코드를 변경하지 않고 스타일 및 스크립트를 조정합니다.

텍스트 튜토리얼

크롬 개발자 도구: 3.10 | 단계별 디버깅 및 특정 위치에서 디버깅

디버깅 프로세스의 상세한 제어.

텍스트 튜토리얼

Chrome Developer Tools: 3.11 | Console: 개요, 간단한 코드 실행 및 출력

크롬 개발자 도구 : 3.11 | 콘솔 : 개요, 간단한 코드 실행 및 출력

콘솔 및 그 기본 기능 소개.

텍스트 튜토리얼

Chrome 개발자 도구: 3.12 | 콘솔에서 DOM 요소에 액세스

콘솔을 통한 DOM 직접 조작.

텍스트 튜토리얼

크롬 개발자 도구: 3.13 | 스니펫 및 콘솔에서의 시간 측정

재사용 가능한 코드 단편과 성능 측정.

텍스트 튜토리얼

Chrome Developer Tools: 3.14 | Log 출력 그룹화 및 스타일링

Chrome 개발 도구: 3.14 | Log 출력물 그룹화 및 스타일링

로그 출력은 색상과 글꼴을 변경하고 그룹화할 수 있습니다.

텍스트 튜토리얼

Chrome Developer Tools: 3.15 | 추가로 유용한 콘솔 메소드들

Chrome Developer Tools: 3.15 | 더 많은 유용한 콘솔 메서드

일부는 사용 빈도가 낮지만 여전히 유용한 콘솔 기능들.

텍스트 튜토리얼

네트워크 분석 및 최적화

Chrome 개발자 도구: 4.1 | 네트워크: 기능 개요

네트워크 요청과 응답의 분석.

텍스트 튜토리얼

Chrome 개발자 도구: 4.2 | 네트워크: 쓰로틀링, 헤더 및 미리보기

Chrome 개발자 도구: 4.2 | 네트워크: Throttling, 헤더 및 미리 보기

느린 네트워크 연결 시뮬레이션 및 HTTP 헤더 조사.

텍스트 튜토리얼

성능 및 저장 공간 최적화

Chrome 개발자 도구: 5.1 | 프로파일러 - 성능을 검토하고 최적화하기

Chrome Developer Tools: 5.1 | 성능을 살펴보고 최적화하기

자바스크립트 코드의 성능 병목 현상 식별.

텍스트 튜토리얼

크롬 개발자 도구: 5.2 | 메모리 프로파일러를 사용하여 메모리 사용량 최적화하기

Chrome 개발자 도구: 5.2 | 메모리 프로파일러를 사용하여 메모리 사용량 최적화하기

메모리 사용량 분석 및 메모리 누수 식별.

텍스트 튜토리얼

어플리케이션 탭 및 기타 도구

Chrome Developer Tools: 6.1 | 유용한 도우미 및 렌더링 탭

성능 최적화를 위한 추가 도구들.

텍스트 튜토리얼

크롬 개발자 도구: 6.2 | 애니메이션 확인과 조정

CSS 애니메이션 및 전환의 상세 분석. 타이밍 함수 및 속성을 조정하여 성능 최적화.

텍스트 튜토리얼

Chrome 개발자 도구: 6.3 | Application 탭을 사용하여 웹 앱 리소스 조사하기

Chrome Developer Tools: 6.3 | 어플리케이션 탭을 사용하여 웹 앱 자원 조사

웹 앱의 저장된 데이터인 Local Storage, Session Storage 및 IndexedDB를 조사합니다. 저장 관리를 최적화합니다.

텍스트 튜토리얼

크롬 개발자 도구: 6.4 | 확장 프로그램 React Dev Tools 사용

React DevTools 브라우저 추가 기능 소개. React 구성 요소 구조, Props 및 State 검사.

텍스트 튜토리얼

설정

크롬 개발자 도구: 7 | 크롬 개발자 도구의 주요 설정들

효율적인 작업 환경을 위한 DevTools 구성. 테마, 키보드 단축키 및 기타 설정 수정.

텍스트 튜토리얼

다른 브라우저의 DevTools

크롬 개발자 도구: 8.1 | MS Edge 개발자 도구

Chrome 개발 도구와 매우 유사하지만 세부적인 차이가 있습니다.

텍스트 튜토리얼

크롬 개발자 도구: 8.2 | Firefox-DevTools

현저한 차이가 있지만 원칙적으로 매우 유사합니다.

텍스트 튜토리얼

Chrome 개발자 도구: 8.3 | 사파리 개발자 도구

일부 크롬과 큰 차이가 있지만 여기도 원칙은 같습니다.

텍스트 튜토리얼

콘텐츠에 대한 세부 정보

크롬 개발자 도구를 활용하여 웹 페이지를 최적화하세요
각 화면 크기에서 완벽하게 로드되고 빠르게 실행되는 오류 없는 웹 페이지? 이것을 달성하기 위해 페이지의 코드를 분석하고 최적화해야 합니다. Chrome 개발자 도구가 이를 위해 탁월한 도구입니다. 이를 통해 HTML, CSS 및 JavaScript 코드에서 오류를 찾을 수 있습니다. 또한 성능, 코드 흐름 및 메모리 사용량에 대한 상세한 분석을 수행할 수 있습니다. 이러한 진취적인 작업으로 페이지의 가시성을 높여주는 디버깅과 최적화를 통해 페이지를 수정할 수 있습니다.
크롬 개발자 도구를 효과적으로 사용하는 방법을 Software-Entwickler und Trainer Stephan Haewß로부터 이 총 6시간이 넘는 자습서에서 배울 수 있습니다. Chrome 개발자 도구의 기본부터 고급 기술까지 학습하며 깔끔하고 강력한 페이지 디자인을 구현하세요!

HTML, CSS, JavaScript - 최적화된 레이아웃을 갖춘 깔끔하고 빠른 웹 사이트에 대한 디버깅

이 강좌는 브라우저에서 직접 제공되는 Chrome 개발자 도구에 대한 소개로 시작합니다. 개발 도구가 무엇이며 기본적인 사용법을 배울 수 있습니다. 그 다음은 Elements 탭에서 페이지의 스타일, 레이아웃 및 디자인을 검사하고 편집할 수 있습니다. Sources 및 Console 섹션을 통해 스크립트 디버깅을 수행할 수 있습니다. 또한 크롬 개발자 도구를 사용하여 네트워크 분석, 성능 및 메모리 최적화하는 방법을 배울 수 있습니다. 마지막으로 다른 브라우저의 도구 사용법을 알아볼 수 있습니다. 따라서 Chrome의 개발자 도구를 이용하여 웹 페이지를 디버깅하고 최적화하려는 모든 웹 개발자를 대상으로 하는 강좌입니다.

Chrome 개발자 도구를 효과적으로 활용하는 방법 - 자습서의 내용 요약

Chrome 개발자 도구 소개: 개발자 도구를 열고 탐색하며 HTML, CSS 및 JavaScript의 편집 및 오류 해결에 중요한 기능들을 효율적으로 사용하는 방법을 배웁니다.
HTML 및 CSS 디버깅: Chrome 개발자 도구를 사용하여 웹 사이트의 DOM 트리를 검사하고 HTML 및 CSS를 실시간으로 편집하여 레이아웃 문제와 CSS 스타일링 오류를 즉시 수정하는 방법을 배우세요 - 변경 사항을 영구적으로 적용하기 전에 디자인을 빠르게 테스트하고 조정하는 데 최적입니다.
JavaScript 디버깅: JavaScript 파일을로드하는 방법, 중지점 설정 및 코드 단계적 실행 방법에 대해 알아봅니다. 변수 및 객체를 실시간으로 검토하며 CallStack는 함수 호출을 역으로 추적하는 데 도움이 됩니다 - 정확한 오류 해결을 위한 이상적입니다.
콘솔 사용: Chrome 개발 도구의 콘솔을 사용하면 로그를 열고 분석하고 JavaScript 코드를 실행하며 웹 페이지 요소를 직접 조작할 수 있습니다. 정확한 로그 출력을 통해 코드를 철저히 분석하고 최적화할 수 있어 디버깅과 성능 향상을 크게 용이하게 합니다.
성능 최적화: 네트워크 요청 및 로드 시간을 확인하고 메모리 사용량을 모니터링하고 메모리 누수를 식별할 수 있습니다. JavaScript 성능을 효과적으로 최적화하고 세부적인 응용 프로그램 성능 분석을 통해 로드 속도와 자원 관리를 효율적으로 향상시킬 수 있습니다.
고급 기술: Chrome 개발자 도구의 Application 패널을 통해 LocalStorage, IndexedDB 및 Cache와 같은 웹 스토리지에 액세스하고 Service Workers 및 Manifest의 관리 뿐만 아니라 React-DevTools와 같은 확장 프로그램을 통해 반응형 애플리케이션을 더 잘 디버깅할 수 있습니다. 맞춤형 설정을 통해 개인 작업 요구 사항에 최적한 도구 구성이 가능합니다.