美文网首页
3.开发者控制台

3.开发者控制台

作者: 饥人谷_zhangfan | 来源:发表于2017-06-26 12:09 被阅读0次

开发者控制台

译者:张帆

写代码容易出错,而你也很有可能会犯错……额,我到底是想说什么呢?那就是——如果你不是机器人的话,你就一定会犯错。但是在浏览器中,默认情况下用户是看不到这些错误的,如果脚本里的某些代码出错了,我们将看不到是哪儿出错了更没办法去修改了。
为了查看错误并获取大量关于脚本的有用信息,浏览器都内置“开发者工具”。
大多数开发人员倾向于使用Chrome或Firefox来开发,因为这些浏览器自带了最好的开发者工具,其他浏览器也提供开发者工具,有时还提供一些特殊功能,但通常也无法对Chrome和Firefox望其项背。所以,大多数人都有一个自己“最喜欢”的浏览器,如果某个问题是特定浏览器的,那么他们也会换到另外的浏览器。开发者工具非常强大,有很多特性。首先,我们将学习如何打开它们,查看错误并运行JavaScript命令。

Google Chrome

打开bug.html这个网页。
JavaScript代码中有一个错误。普通访问者是不会看到它的,所以让我们打开开发工具来查看它。
F12键进入开发者控制台,如果你是mac系统的话,按Cmd+Opt+J,在默认情况下,开发者工具将在控制台选项卡上打开,它看起来有点像这样:


开发者工具的确切外观取决于你的Chrome版本。它会随时间变化,但总体来说是相似的。
  • 在上图,我们可以看到红色的错误消息。显示脚本包含一个未知的“lalala”命令。
  • 在右边,有个指向错误源的可点击链接 bug.html:12,并且表示了错误发生的行号。

在错误消息下面有一个蓝色的符号。它表示一个“命令行”,我们可以在其中输入JavaScript命令并按Enter键来运行它们(按shift+Enter会转换为输入多行命令)。现在我们可以看到控制台提示的错误,对刚刚开始学习的我们已经足够了,稍后我们将回到开发者工具,并在“Chrome中的调试”章节中更深入地讨论调试BUG。

Firefox, Edge 以及其他浏览器

大部分浏览器都是按F12键进入开发者工具。他们的外观和功能都十分相似,如果你知道如何使用其中一种(建议从Chrome开始),那么你可以轻易使用其他浏览器的开发者工具。

Safari

Safari(mac系统的浏览器,不支持Windows和Linux系统)有点特别,我们需要先首先启用“开发菜单”
打开选项,进入“高级”面板,底部有个复选框:



现在,使用Cmd+Opt+C可以切换控制台,还需要注意的是,“开发选项”出现在顶部菜单栏,它有许多命令和选项。

总结

  • 开发者工具允许我们看到错误、运行命令、检查变量以及更多功能
  • Windows系统下的大多数浏览器都是按F12键进入开发者工具,mac系统上chrome需要按Cmd+Opt+J进入,Safari是按Cmd+Opt+C(首先你要启用它)

现在一切准备就绪,在下一节中,我们将讨论学习JavaScript。

相关文章

  • 3.开发者控制台

    开发者控制台 译者:张帆 写代码容易出错,而你也很有可能会犯错……额,我到底是想说什么呢?那就是——如果你不是机器...

  • Sophix 热修复 Android SDK 3.1.8 接入

    帮助文档 注册阿里云开发者 阿里云 进入控制台 控制台 进入移动热修复控制台 移动热修复控制台 创建产品 创建 A...

  • 网页版微信自动群发消息

    ###操作步骤: 1. 登陆网页版微信 2. 打开开发者工具 3. 打开 console 控制台 4. 粘贴一下代...

  • 查看electron 的版本

    1、打开程序 运行开发者工具2、在控制台中输入以下代码 3、控制台打印出{http_parser: "2.7.0"...

  • 控制台的使用

    chrome控制台使用(Using the Console) 控制台提供了两个主要的方法给开发者测试网页和应用程序...

  • postman 笔记1:入门

    1. Bulk Edit(x-www-form-urlencoded) 2. 控制台 # 控制台输出 3. pm ...

  • 开发者控制台

    window 按下 F12 键打开控制台 image.png 在这我们能看到红色的错误提示信息。这个场景中,脚本里...

  • 高德地图API

    1 注册成为开发者 http://lbs.amap.com/ 2 进入开发者中心控制台 3 创建新应用 4 添加新key

  • mac 打开chrome控制台的快捷键

    开发者工具:option+command+i javascript控制台:option+command+j 或者按...

  • mac chrome 开发者工具 快捷键

    开发者工具:option+command+ijavascript控制台:option+command+j或者按op...

网友评论

      本文标题:3.开发者控制台

      本文链接:https://www.haomeiwen.com/subject/dfidcxtx.html