JavaScript- 개발 도구의 요령을 알아야 합니다.

안녕하세요. Wes Bos의 JavaScript30 작업에 다시 오신 것을 환영합니다! 오늘의 도전은 결코 도전이 아니었습니다. 오늘은 몇 가지(아마도...14개)의 다양한 개발 도구 트릭을 살펴보았습니다. 그의 어레이 심장 강화 운동과 달리 이것은 우리가 실제로 아무것도 할 수 없게 했지만 그가 우리에게 콘솔과 상호 작용하는 다양한 방법을 보여주는 것을 지켜보기만 했습니다. 몇 주 전 이전 비디오에서 그가 console.table()을 사용하는 것을 보고 정신을 잃을 뻔했기 때문에 실제로 이것을 보고 다소 기뻤습니다. 콘솔과 상호 작용하는 다양한 방법이 있다는 사실이 왜 나에게는 분명하지 않았는지 모르겠지만 당시에는 정말 놀랐습니다.

다른 콘솔 명령을 사용하기 전에 Wes가 가장 먼저 보여준 것은 다양한 작업(하위 트리 수정, 속성 수정 또는 노드 제거)에서 JavaScript 함수를 분석한 다음 변경 사항에 영향을 미칠 코드 줄을 표시하는 방법이었습니다. 페이지. 이는 웹사이트의 다양한 측면을 분석하여 상호작용을 위해 JavaScript를 사용하는 방법을 정확히 확인하는 매우 멋진 방법인 것 같습니다. 특정 변경 사항을 어떻게 코딩했는지 확인하고 변경 사항이 발생하기 전에 일시 중지할 수 있습니다. 글쎄...적어도 그게 제가 얻은 교훈이었습니다.

    // Regular
    console.log('hello')

    // Interpolated
    console.log('hello I am a %s string', 'poopy')

    // Styled
    console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue')

    // warning!
    console.warn('OH NOOOOOO')

    // Error :|
    console.error('Shit!')

    // Info
    console.info('Crocodiles eat 3-4 people per year')

다음 부분에서는 콘솔에서 사용할 수 있는 다양한 작업과 명령을 다루었습니다. 언제 이 중 하나를 사용해야 하는지는 확실하지 않습니다. 하지만 이것이 흥미롭지 않다는 의미는 아닙니다. 예를 들면: 콘솔 자체 내에서 텍스트 스타일을 지정할 수 있다는 것을 몰랐습니다. 약간 불필요하지만 멋져 보인다고 생각합니다. 경고/오류/정보 메시지 호출과 동일합니다. 네, 해보니까 꽤 흥미롭네요. 그런데 왜 그렇게 하려고 하는지 모르겠습니다(콘솔에서 텍스트 기반 게임을 만드는 것 외에는).

그런 다음 console.assert()를 사용하여 문서의 일부에 특정 클래스가 포함되어 있는지 테스트하는 방법을 살펴보았습니다. 이는 문서 내의 내용이 사실인지 거짓인지 테스트하는 데에도 사용할 수 있습니다. 잘못된 경우 자체 오류 메시지가 표시될 수 있습니다. 그런 다음 정리에 도움이 되는 console.clear()를 사용하여 콘솔을 정리하는 방법을 빠르게 다루었습니다. 문서 전체에 여러 가지 콘솔 명령이 있고 마지막에 정리하려는 경우에도 유용할 수 있습니다. 이렇게 하면 전체 내용을 검토하고 해당 지점까지의 모든 콘솔 명령을 삭제하거나 주석 처리할 필요가 없습니다.

    // Testing
    const p = document.querySelector('p');

    console.assert (p.classList.contains('ouch'), 'That is Wrong!')

    // clearing
    // console.clear()

    // Viewing DOM Elements
    console.log(p)
    console.dir(p)

    // Grouping together
    dogs.forEach(dog => {
      console.groupCollapsed(`${dog.name}`)
      console.log(`This is ${dog.name}`);
      console.log(`${dog.name} is ${dog.age} years old`)
      console.log(`${dog.name} is ${dog.age *7} dog years old`)
      console.groupEnd(`${dog.name}`)
    })

    // counting
    console.count('Craig')
    console.count('Craig')
    console.count('Billy')
    console.count('Craig')
    console.count('Craig')
    console.count('Craig')
    console.count('Billy')
    console.count('Billy')
    console.count('Craig')

    // timing
    console.time('fetching data');
    fetch('https://api.github.com')
      .then(data => data.json())
      .then(data => {
        console.timeEnd('fetching data');
        console.log(data)
      })

계속해서 특정 항목의 DOM 요소를 볼 수 있는 console.dir()에 대해서도 다루었습니다. 제가 인식하지 못하거나 이해하지 못하는 부분이 너무 많지만, 시간이 지나면 그런 일이 올 것이라고 상상합니다. 현재로서는 console.group() 명령이 더 유용하다고 생각합니다. 정보를 가져올 수 있다는 사실만 있으면 객체나 배열로 정보를 저장할 수 있으며 그 정보는 매우 도움이 되는 것 같습니다. 때때로 배열이나 배열 내의 객체에 대한 원시 코드가 부담스러울 수 있지만 이렇게 하면 정보가 자동으로 정리됩니다. 실제로 보면 꽤 멋있습니다.

강의의 마지막 두 부분은 console.count() 및 console.time()에 관한 것이었습니다. 이 두 부분도 제게는 필요하지 않을 것 같은 특정 사용 사례처럼 보입니다. 계산 기능은 특정 단어/구문이 몇 번이나 참조되었는지 확인할 수 있는 일종의 멋진 기능입니다. 그것이 콘솔 내에서만 참조되는지 아니면 전체 문서에 대해 참조되는지는 완전히 명확하지 않지만 콘솔 내에서만 참조되는 것 같습니다. console.time()은 오래된 것 같습니다. 이렇게 말하는 이유는 다른 소스에서 데이터를 얼마나 빨리 가져오는지 확인할 수 있는 다양한 방법이 있기 때문입니다. 특정 웹사이트에서 다른 요소를 로드하거나 웹사이트 자체로 이동하는 것이 좋습니다. 로드 속도를 확인하는 방법은 여러 가지가 있지만 콘솔에서도 이를 수행할 수 있는 것이 타당하다고 생각합니다.

오늘 수업은 기본적으로 여기까지인 것 같아요. 별로 흥미롭지는 않았지만 유익했습니다. 앞으로 이러한 명령 중 일부를 사용할 수도 있지만 지금은 콘솔을 사용하는 다른 방법을 보게 되어 기쁩니다. 왜냐하면 처음 그가 console.table()을 아무렇지도 않게 사용하는 것을 보고 지금도 그것에 대해 생각하고 있기 때문에 궁금했기 때문입니다. . 음...오늘은 여기까지입니다! 나중에 다시 방문하여 JavaScript 30 - 10을 확인하세요. 여러 확인란을 선택하려면 Shift 키를 누르세요!

위 내용은 JavaScript- 개발 도구의 요령을 알아야 합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!