大家好，感谢邀请，今天来为大家分享一下谷歌浏览器加载js插件的问题，以及和谷歌浏览器加载js插件失败的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！

本文目录

1. 如何在浏览器上运行js
2. 谷歌浏览器怎么调试js
3. opera浏览器热门扩展插件推荐
4. chrome如何添加js插件

一、如何在浏览器上运行js

JavaScript不同于java语言或者c语言，需要环境、需要编译再运行，js在被制造出来时，就是为浏览器而生，可以直接在浏览器里运行，这里以谷歌浏览器为例，鼠标右键检查或者快捷键F12即可看到控制台可以理解为操作系统里的命令行模式

在这里就可以直接输入我们想输入的js代码，回车即可查看代码执行结果

在浏览器输入js代码的好处显而易见：方便，打开浏览器就能输代码查看执行结果，我平常也多用浏览器控制台学学原生js的原理或者看看正则是不是匹配，因为浏览器控制台的缺点太多了：操作不便，没法文件操作只能命令行，找错困难，大多数时候的js是有依赖的，控制台不方便整依赖，所以，一般控制台也就执行执行简单原生的js

实际上，我们肯定不想用命令行的方式，当然是用一个顺手的IDE写代码。

这种方式，就是我大学时候，老师们教的传统方式了。

学HTML的时候，会教到标签，有一个标签不同于别的花里胡哨的标签，这个标签很牛，叫做<script>脚本标签，用来嵌入或者引用可执行脚本，这里解释一下嵌入和引用。嵌入呢，就是把脚本写在标签里边儿，引用呢，就是把脚本写好，然后用标签引入这个脚本的路径

这是主流的写法也是主流的教法，嵌入的写法就是这样：

查看执行结果的话，点击IDE边上的浏览器图标或者右键run这个html页面，等浏览器弹出来，右键检查就能看到控制台输出的值了

实际上上面第二种方法已经很靠谱很普及了，可还是用起来不舒服，每回都要写一个HTML，有的甚至还要再写一个js，那能不能像运行html一样，直接右键运行js呢？

当然是可以的！用node！以下是我花了一个小时才整成的历程！

1、由于我是新的电脑，我装了个nodejs，安装包安装完后，直接命令行执行node命令，即可以直接运行js代码

这样方式还是很蠢，和浏览器没什么区别

2、我用IDE些好的js文件，然后用node单独执行

看上去是好一点了，可以单独执行文件了，但是这样还是很蠢，每回打开cmd还要找到js的路径

二、谷歌浏览器怎么调试js

首先我们打开开发者工具，你可以直接在页面上点击右键，然后选择审查元素或者在Chrome的工具中找到或者你直接记住这个快捷方式： Ctrl+Shift+I(或者Ctrl+Shift+J直接打开控制台)，或者直接按F12。

  打开的开发者工具就长下面的样子，建议大家将开发者工具弹出作为一个独立的窗口：

这个就是查看、编辑页面上的元素，包括HTML和CSS：

  左侧就是对页面HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性，或者你点右键选;Edit as Html;直接对元素的HTML进行编辑，或者删除某个元素，所有的修改都会即时在页面上得到呈现。(注：看到上面右键菜单的最后一个选项;审查元素了么?这是不是说明这个开发者工具的页面也是HTML来的呢?你点一下就知道了哦，嘿嘿)

你还可以对某个元素进行监听，在JS对元素的属性或者HTML进行修改的时候，直接触发断点，跳转到对改元素进行修改的JS代码处：

  Elements标签页的右侧可以对元素的CSS进行查看与编辑修改：

  你还可以通过这里看到各CSS选择器设置的CSS值的覆盖情况。

下面的Metrics可以看到元素占的空间情况(宽、高、Padding、Margin)

  注意到上面的Properties没有?这个很有用哦，可以让你看到元素具有的方法与属性，比查API手册要方便得多哦(要注意某些方法和属性在IE、FireFox等其他浏览器下面的支持情况哦)。

  Resources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容，同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除。

这里的CSS文件有一个好玩的特性，你可以直接修改CSS文件，并且修改即时生效哦：

  Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用，特别是在查看Ajax类请求的时候，非常有帮助。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示的哦。

点击左侧某一个具体去请求URL，可以看到该请求的详细HTTP请求情况：

  我们可以在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息，对于开发、调试，都是很有用的。

很明显，这个标签页就是查看JS文件、调试JS代码的，直接看下图的说明：

  还有你可以打开Javascript控制台，做一些其他的查看或者修改：

  你甚至还可以为某一XHR请求或者某一事件设置断点：

注意这个Timeline的标签页不是指网络请求的时间响应情况哦(这个在Network标签页里查看)，这个Timeline指的JS执行时间、页面元素渲染时间：

  点击底部的Record就可以开始录制页面上执行的内容。

这个主要是做性能优化的，包括查看CPU执行时间与内存占用：

这个对于优化前端页面、加速网页加载速度很有用哦(相当与Yslow)：

  点击run按钮，就可以开始分析页面，分析完了就可以看到分析结果了

  它甚至可以分析出页面上样式表中有哪些CSS是没有被使用的哦：

  这个除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外，还可以当作Javascript API查看用。

例如我想查看console都有哪些方法和属性，我可以直接在Console中输入;并执行：

  怎么样，一目了然了吧?再例如我想查看日期函数都有哪些方法：

  (注：注意在这里看到的某些方法和属性是ES5新增的，记得兼容其他浏览器的支持情况哦)

Google Chrome除了简洁、快速，现在的Chrome的插件也非常的丰富了。而对于web开发者来说，Chrome对于HTML5、CSS3等一些新标准的支持也是比较完善的，而且Chrome的开发者工具我个人认为真的非常好用，这就是为什么我向web开发者推荐使用Chrome的原因。

三、opera浏览器热门扩展插件推荐

opera浏览器热门扩展插件官方下载地址

这个插件可以保存文本框的输入历史，以后在相同的文本框进行输入的时候可以显示输入历史或与当前输入自动匹配。

ie、chrome自带此功能。opera默认好像只有保存表单功能。这个扩展功能还是不错的，可以设置多种自动完成内容的排序方式，方便地删除条目。

用过chrome的同学在访问外文网页的时候一定都见过网页上方“此网页为**文，是否翻译”的提示吧。

这个插件可以使opera实现此功能，效果跟chrome基本一模一样，也是使用谷歌的翻译接口。不过提示是英文的。点击translate，翻译整个网页。

可以自行设置每种语言，“自动翻译该语言”“询问是否翻译”“不翻译该语言”。另外在页面上按下shift+ctrl+R直接翻译页面。

默认不翻译加密页面，可以在首选项中开启。“Enable translation on secure pages?”选择”是“

”从安全站点的文本将通过安全连接发送到谷歌的翻译服务器“

在网页上选中一段文字，按快捷键翻译。也可以双击单词翻译。

扩展中心更靠前还有In-place translator、Translator。不过我觉得都不如这个好用。

4，Persistent Text/ Textarea Backup Localstorage(文本保存)

相信很多人在论坛发帖时经历过因浏览器崩溃、发帖错误等原因打了几百字的帖子丢失的悲剧吧。

Persistent Text可以保存你在文本框输入的内容，如果你再此访问这个网页，可以恢复上次输入的内容。

有三种恢复方式，一种是有内容可以恢复时浏览器右上角显示一个恢复按钮，另一种是弹出网页消息询问是否恢复，第三种是自动恢复。

Textarea Backup Localstorage会在文本输入框上显示一个红色按钮。点击可以选择恢复文本，清除等。似乎比上一个更方便。

注意，对有些网页支持好像不是很好，比如在金山卫士论坛发主题，可能恢复了题目没恢复内容。所以在某个网站用之前最好先试一下。

5，Image Preview Popup(图片预览)

当指标滑过图片档或连结至图片的连结时，和图片预览一起显示弹跳视窗。(这个扩展还是多语言的，有繁体中文)

不用多介绍了，把鼠标悬停在下面两个链接上试一试吧。

此扩展的新版添加了一个“幻灯片”功能，可以依次浏览网页上所有图片链接。

Adb广告过滤名气还是相当大的，喜欢过滤广告不妨试一试。

在Opera上订阅并启用广告过滤列表。

可供订阅的列表有：Fanboy， Peter Lowe， EasyList.。。。等等(也包括了各种不同语言的子列表)。”

虽然opera过滤广告的方式有很多，不过安装这个扩展可能是最方便的选择。

(我一般不用广告过滤，不知道效果如何。看评论是褒贬不一。)

LastPass是一个跨浏览器的密码管理同步工具。百度百科介绍

虽然opera有密码管理器自动填表，但是功能不如这个强大，也不能用operalink同步表单。

(目前正式版opera11.10不能同步密码，不过11.50测试版operalink已经可以同步密码了)

用“Read it Later”账户保存你想稍后阅读的页面。可以跨平台同步。

作用跟书签差不多，但是书签一般用来保存经常访问的链接或收藏某些页面。把这些需要稍后阅读的内容放进去会很乱。

在论坛看到一篇长帖子，暂时没时间读，可以保存Reading List，有时间再读。

9，TinEye Search(相似图片搜索)

TinEye是一个查找相似图片的搜索引擎。上传本地图片或者输入图片链接， TinEye可以帮你找到互联网上相似的图片。

安装这个扩展以后，可以通过单击(或者按热键单击)页面上的图片直接用TinEye搜索该图片。

如果你看到一张图片不知道它的出处，或者觉得图片不够清晰，可以使用这个插件找到图片来源和更清晰的图片。

TinEye在图片搜索方面做得还是相当不错的，不过没有中文页面，对国内网页上的图片好像收录不多。

找国内的图片，也可以使用百度识图。

X-notifier是一款跨浏览器的邮件提醒插件，可以定时检查并提示新邮件，一键登陆邮箱。支持很多邮箱。包括Gmail、雅虎、hotmail，国内的网易、腾讯等。

安装此插件，设置邮箱种类，默认支持gmail，hotmail等，可以点击右边scripts添加更多邮箱。

点击scripts按钮，下面有“get scripts”，点击进入这个网页，在上面找到想要添加的邮箱，点击邮箱名，把链接地址复制到scripts的输入框，点击add就可以了。比如网易：。。。 rscripts/netease.js(奇怪的是chrome浏览器的此插件要添加本地的.js文件，opera是添加js的地址)

然后输入邮箱名和密码，添加账户，下面可以设置检查邮件的时间间隔等。

我试了一个gmail邮箱和一个126邮箱，检查新邮件基本正常，但是点击之后却不能直接登陆邮箱，而是打开一个未登录的页面。但是我在chrome浏览器上使用这个插件，却可以正常登陆邮箱。11.10和11.50alpha都是这个问题。不知道是什么原因。

阅读分成多页的网页时AutoPatchWork可以自动加载下一页并插入到当前页的下面，这样可以用连续滚动的方式阅读多页的网页，无需点击“下一页”。

此扩展可以使用Google， Yandex， Bing， Yahoo和Baidu搜索引擎对当前浏览网站进行站内搜索。搜索网站内部的关键词。

把opera的某个标签页置顶，使其它标签无法遮挡被置顶的标签。

这个功能在某些标签页以小窗口形式显示的时候有用，比如百度和谷歌的音乐盒，就是小窗口的标签，把这个标签置顶，在浏览其它网页的同时可以方便地看到正在听的曲目。

opera默认的鼠标手势“上--右”(最大化)可以把当前标签以小窗口形式显示，配合标签置顶，可以小窗口播放视频，小窗口搜索、对比网页，在两个或多个不同网页之间粘贴复制等。

要使用此扩展，需要在opera的菜单--设置--首选项--高级--内容--JavaScript选项--“允许将窗口提到最前”打勾确定。

14，Show hide password(显示隐藏密码)

opera有密码管理器wand，可以保存网站的密码自动登录。登录的时候密码会显示为一串*号。有一些网页本身自动保存的密码也显示为*。

wand用得多了，可能当时设定的密码已经忘记了。虽然能登录，但是某些情况还是需要输入密码，wand保存的密码是加密的，不能直接显示。

这个扩展可以让密码的那一串*号显示为密码，密码框右侧会有一个链接“show password/hide password”，点击“show”之后再用wand填写密码。密码就会显示出来。

opera默认填写密码后直接登录，这样密码会一闪而过看不清楚，上面的wand链接里有说明：

如果您只希望 Wand帮助您填写好用户名与密码而不自动登录，取消勾选 opera:config#UserPrefs|WandAutosubmit即可。

当然别人用你的电脑也可以用这种方法得到你的密码。如果担心这种情况发生，可以在opera首选项--高级--安全--设定主密码，来保护你保存的密码。

opera最新的11.50snapshot版已经可以用operalink账户同步密码了。这样只要保护好opera账户的密码，你的其它密码都可以不用记了。

15，Popup statusbar(弹出式状态栏)

opera默认设置鼠标移动到链接上会悬浮显示链接地址，不过是跟随鼠标位置显示的，有时可能会遮挡鼠标附近的内容。

可以用这个扩展来替代此功能，当鼠标移动到链接上时，这个扩展会在浏览器的左下角显示鼠标所在的链接地址。然后在opera首选项--高级--浏览--把“显示工具提示的勾去掉”，就不会在鼠标所在的位置显示链接了。

NetTools是几个常用工具的集合。提供对当前网址的ping， traceroute(跟踪路由)， geoip(显示网站ip)， WHOIS(查询域名信息)， HTTP HEAD(http头检测)， DNS info(DNS信息)，等。

利用这个扩展可以用鼠标框选多个链接一次打开。省去鼠标多次点击。

新浪微博_Opera快速拨号扩展给用户提供一个快捷入口，不仅能够点击链接到“新浪微博”，还能够在首次得到新浪授权后，显示用户主页最新微薄，并读取未读评论数、@数、私信及粉丝数——用更直观简约的方式得到微博状态的更新。

不错的自动翻页扩展，还有中文论坛。

四、chrome如何添加js插件

1、下载插件的安装包，或者手动编译文件后缀为.crx的插件安装包。

2、启动浏览器后，点击界面右上方的扳手图标，依次点击“工具”、“扩展程序”。

3、把本地的插件安装包直接拖曳到“扩展程序”的页面中即可进行安装。浏览器会自动识别并安装该安装包。

4、注意：由于插件可能存在安全问题，目前大多数的Chrome内核不再支持该方法进行安装，此时可以提交到谷歌Chrome浏览器插件中心进行添加。

好了，本文到此结束，如果可以帮助到大家，还望关注本站哦！