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)
      })

接下来我们还介绍了 console.dir()，它可以让你查看特定事物的 dom 元素。 其中有很多部分我不认识或不理解，但我想这会及时实现的。我确实认为 console.group() 命令目前对我有更多用处。 事实上，您可以将信息存储在对象或数组中，并且它们的信息似乎非常有用。 有时，数组或数组中对象的原始代码可能会让人不知所措，但这会自动组织信息。 其实还挺好看的。

本课的最后两个部分是 console.count() 和 console.time()，它们看起来也像是我认为我不需要的特定用例。 计数功能很酷，您可以看到特定单词/短语被引用的次数。 目前尚不完全清楚这是否仅在控制台内或整个文档中被引用，但看起来它只是在控制台内。 console.time() 似乎已经过时了。 我这样说是因为有很多不同的方法可以查看您从其他来源获取数据的速度。 无论是从特定网站加载不同的元素还是访问网站本身。 有很多方法可以查看事物加载的速度，但我想在控制台中也能做到这一点是有意义的。

我想这基本上涵盖了今天的课程。 这不是很令人兴奋，但内容丰富。 我可能会使用其中一些命令，但目前我很高兴看到使用控制台的其他方式，因为自从我第一次看到他使用 console.table() 以来我一直很好奇，所以我现在仍然在思考它。 嗯……今天就这样吧！ 请尽快回来查看：JavaScript 30 - 10 按住 Shift 选中多个复选框！

以上是JavaScript- 必须了解开发工具技巧的详细内容。更多信息请关注PHP中文网其他相关文章！