홈페이지>웹 디자인 튜토리얼>자바스크립트 튜토리얼

효율성을 향상시킬 수 있는 11가지 크롬 디버깅 팁

저자：Eve Cole 업데이트 시간：2022-06-24 16:08:19
이 기사에서는 효율성을 666%까지 직접적으로 높일 수 있는 11가지 고급 크롬 디버깅 기술을 공유하겠습니다. 친구들에게 도움이 되기를 바랍니다.

프론트엔드 아동화의老婆로서 크롬 브라우저에 대해 잘 알고 계실 거라 믿습니다.调页面,写BUG ,画样式,看php片등 온 세상이 그것 없이는 쓸모가 없을 것입니다.

믿을 수 없나요? 우리老婆얼마나 강력한지 살펴보겠습니다...

1#. 원클릭 요청 다시 시작

백엔드 인터페이스를 공동으로 디버깅하거나 온라인 버그를 해결할 때 다음과 같은 말을 자주 듣습니다. 왜 오류가 발생했는지 알아보세요!

요청을 다시 보내는 엄청나게 간단한 방법이 있습니다.

  • Network

  • Fetch/XHR 클릭한 후

  • 다시 보낼 요청을 선택하고

  • 마우스 오른쪽 버튼을 클릭한 후 Replay XHR 선택합니다.

1.gif

페이지를 새로 고치거나 페이지와 상호 작용할 필요가 없습니다. 정말 멋지지 않나요? ! !

2#.

콘솔에서 요청을 빠르게 시작하거나 공동 디버깅 또는 버그 수정을 수행하는 경우 동일한 요청에 대해 입력 매개변수를 수정 하고 다시 시작해야 하는 경우가 있습니다.

  • Network 선택하고

  • Fetch/XHR 클릭한 후

  • Copy as fetch 선택

  • 하고 코드를 붙여넣어

  • 매개변수를 수정한 후 Enter를 눌러 완료합니다.

2.gif

예전에는 항상 코드를 변경하거나 fetch 직접 작성해서 처리했는데 생각해보면 정말 어리석은 일이었습니다...

3#.

코드를 계산하면 복잡한 객체가 출력됩니다

.

복사해서 다른 사람에게 보내야 하는데 어떻게 해야 하나요?

  • copy 기능을 사용하여对象입력 매개 변수로 실행합니다.

3.gif

과거에는 항상 JSON.stringify(fetfishObj, null, 2) 통해 콘솔에 인쇄한 다음 수동으로 복사하여 붙여넣었습니다. 이것은 정말 비효율적이었습니다...

4#.

웹 페이지 디버깅 시 Elements 패널에서

요소

Elements 선택한 후 JS 통해 해당 요소의宽,高,位置등 일부 속성을 알고 싶다면 어떻게 해야 할까요?

  • Elements 통해 디버깅할 요소를 선택

  • 하고 $0 으로 바로 콘솔에 접속합니다.

4.gif

5#. 전체 화면 웹 페이지 캡처

때로는 웹 페이지의 스크린샷을 찍어야 할 경우가 있습니다. 시스템에 내장된 스크린샷이나 WeChat 스크린샷을 사용해도 괜찮지만 그 이상의 콘텐츠를 캡처 해야 합니다. 한 화면. 무엇을 해야 할까요 ?

  • 촬영해야 할 콘텐츠를 준비합니다.

  • cmd + shift + p Command 명령을 실행

  • 하고 Capture full size screenshot 입력하고 Enter를 누릅니다.

5 (1).gif

선택한 요소 중 일부를 가로채고 싶다면 어떻게 해야 할까요?

대답도 매우 간단합니다. 세 번째 단계에서는 Capture node screenshot

5-2.gif

6#. 한 번의 클릭으로 모든 DOM 요소를 확장합니다

. 요소를 디버깅할 때 레벨이 비교적 깊은 경우 디버깅하기 위해 하나씩 확장하는 경우가 자주 있습니까?

opt 키를 누른 채 클릭하는

더 빠른 방법이 있습니다

  • opt 확장해야 하는 가장 바깥쪽 요소).

6.gif

7#.이 시나리오를 보려면 마지막 실행 결과를 참조해야

합니다.특정 문자열에 대해 다양한 프로세스가 수행되었으며 각 실행 단계의 결과를 알고 싶습니다. 우리는 무엇을 해야 합니까? .

'fatfish'.split('').reverse().join('') // hsiftaf

다음을 수행할 수도 있습니다.

// 1단계 'fatfish'.split('') // ['f', 'a ', 't', 'f', 'i', 's', 'h']
// 2단계 ['f', 'a', 't', 'f', 'i', 's', 'h'].reverse() // ['h', 's', ' i ', 'f', 't', 'a', 'f']
// 3단계 ['h', 's', 'i', 'f', 't', 'a', 'f'].join('') // hsiftaf

7.png

더 간단한 방법은

$_ 사용하여 매번 복사하지 않고 이전 작업의 결과를 참조하는 것

입니다 
. // 1단계 'fatfish'.split('') // ['f', 'a', 't', ' 물고기']
// 2단계 $_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// 3단계 $_.join('') // hsiftaf

7-2.png

8.# 빠르게 테마 전환

크롬의 흰색 테마를 좋아하는 학생도 있고, 검은색 테마를 좋아하는 학생도 있습니다. 단축키를 사용하여 두 테마 사이를 빠르게 전환할 수 있습니다.

  • cmd + shift + p Command 명령을 실행

  • 하고 Switch to dark theme 또는 Switch to light theme 입력하여 테마를 전환합니다.

8.gif

9.# " $ " 및 " $$ " 선택기는

현재 페이지의 요소를 선택하기 위해 콘솔에서 document.querySelector 및 document.querySelectorAll 사용하는 데 가장 일반적인 요구 사항이지만 실제로는 $ 사용할 수 있습니다. 그리고 $$ 대체.

9.gif

10.# $i 콘솔에 npm 패키지를 직접 설치해

본 적이 있나요? 가끔 dayjs 나 lodash 같은 API 사용하고 싶은데, 공식 홈페이지에 가서 확인하고 싶지 않은 경우 콘솔에서 직접 사용해 볼 수 있으면 좋을 것 같습니다.

Console Importer는 콘솔에 npm 패키지를 직접 설치하는 데 사용되는 플러그인입니다.

  • npm 패키지를 설치하려면

  • Console Importer 플러그인 $i('name')를 설치하세요.

10.gif

11.# 조건부 중단점 추가 조건부 중단점의 멋진 활용

다음과 같은 코드가 있다고 가정해 보겠습니다. 음식 이름이 ? 어떻게 해야 할까요?

불변 음식 = [
  {
    이름: '?',
    가격: 10
  },
  {
    이름: '?',
    가격: 15
  },
  {
    이름: '?',
    가격: 20
  },
]

food.forEach((v) => {
  console.log(v.name, v.price)
})

많은 양의 데이터를 사용할 때 매우 편리하며, 조건이 만족될 때만 조건을 깨고 싶을 때 유용합니다. 조건부 중단점이 없다면 디버거를 n 번 클릭해야 합니까?

11.gif

(학습 영상 공유: 웹 프론트 엔드 개발, 프로그래밍 기초 영상)

위 내용은 효율성을 높일 수 있는 11가지 크롬 디버깅 기술에 대한 자세한 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
관련 기사