解决谷歌浏览器出现“您的连接不是私密连接 攻击者可能会试图”的问题
& & & &今天安装了360安全卫士，本人也知道360带有后门程序，可是还是手贱.一用谷歌浏览器打开就出现“你的连接不是私密连接攻击者可能会试图从窃取您的信息（例如：密码、通讯内容或信用卡信息）。重新加载隐藏高级设置”我傻眼了（注意，我访问的是被封锁的网站，哇咔咔，一般的网站你自己点高级，直接访问就可以了），仔细分析肯定是伪造证书进行中间人攻击，问题一般出现在证书上，哈哈，360 啊，360啊，你是帮凶，我们心知肚明，以后绝对不再使用其任何产品。
& & & &&一、分析原因
& & & &点谷歌浏览器地址栏前面那个叉叉，然后选择证书信息，为证明是伪造，我先看了一次，然后又重启机器做同样的操作，看了一次。
& & & &没有重启前证书信息，颁发给srver.caspiannet.net
& & & &重启后证书信息如下,颁发给
& & & &通过对比两次信息的颁发者和颁发给，明显的不一样，可以判断是伪造证书想干坏事。既然分析出了原因，下面就说解决 办法。
& & & &二、解决办法
& & & &第一步，在“运行”（或者用win+R调出）中输入“certmgr.msc”，进入证书管理中心。
& & & &第二步，进入受信任的根证书办法机构/证书/然后找到China Internet Network Information Center EV Certificates Root 和CNNIC Root证书，选中并先导出此证书，然后删除此证书。（右键--&所有任务--&导出，其中导出证书命名可以自己随意命名，为什么是这两个证书，我不解释，惹麻烦）
& & & &第三步，导入刚才导出的那两个证书到不信任的证书中。操作过程：不信任的证书---&右键---&所有任务---&导入.
& & & &第四步，在不信任的证书/证书中找到刚才导入的证书China Internet Network Information Center EV Certificates Root 和CNNIC Root，右键--&属性，在常规选项卡中，找到“证书目的”，选择“禁用此证书的所有目的”。
& & & &第五步，重启机器，然后刷新浏览器，当然，如果你访问的网站是通过修改host文件来，那么请把host文件重新替换下，刷新即可。
& & & &三、总结
& & & &对于那些不想这么复杂的删除证书的，很简单，使用工具Revoke China Certificates.
& & & &项目地址:/chengr28/RevokeChinaCerts
& & & &全自动可疑证书吊销工具/全自動可疑憑證撤銷工具 &win、MAC平台适用
& & & &Base 为基础版本，删除信任并吊销了几个可疑的根证书、中级证书或假证书，直接运行 RevokeChinaCerts_Base.bat 即可
& & & &Extended 为扩展版本，删除信任并吊销了所有可疑的根证书、中级证书或假证书，直接运行 RevokeChinaCerts_Extended.bat 即可，建议使用此版本
& & & &All 为完全版本，删除信任并吊销了所有可疑的来自大中华地区的证书，直接运行 RevokeChinaCerts_All.bat 即可，此版本用于测试不建议使用
& & & &还有一点要切记：使用360的产品要小心谨慎。
可能你对以下的内容也感兴趣：
CopyRight & &老罗的博客(一亩三分地).&&All rights reserved.&&&&蜀ICP备号
本网站由作为空间服务商使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
引言Google Chrome 是由 Goole 公司开发的一款网页浏览器，自 2008 年 9 月第一个测试版本发布以来，其市场占有率逐步上升，至 2014 年 5 月，Chrome 已超越 Firefox 成为全球市场占有率第二的浏览器。Chrome 的受欢迎程度与其优秀的性能与兼容性密不可分，并且越来越多的网络应用程序都添加了对 Chrome 的支持，也足以体现网络应用的开发人员对 Chrome 的认可与青睐，而其中最重要的原因之一，莫过于 Chrome 所提供的强大的开发者工具。Chrome 开发者工具包含诸多强大的功能模块，适应于多个不同场合的需要。本文先简单介绍 Chrome 开发者工具的各个模块及其基本功能，再着重针对网页脚本调试，阐述如何巧妙运用 Chrome 开发者工具定位与调试问题。（本文所选的 Chrome 开发者工具为 Chrome V35 版本中内置，较之前版本可能略有不同，请留意）Chrome 开发者工具介绍虽然对于 Chrome 开发者工具的介绍，Google 官方以及互联网中都有众多文章进行阐述，但为了有助于读者更好地理解本文后面对如何巧妙运用开发者工具定位及调试脚本的阐述，在此对开发者工具中的各个模块做一个概要性的介绍。如果对其中某些模块特别有兴趣，请参考文末的链接，从中进行深入了解。Chrome V35 版本中的开发者工具分为 8 个大模块，每个模块及其主要功能为：Element 标签页： 用于查看和编辑当前页面中的 HTML 和 CSS 元素。Network 标签页：用于查看 HTTP 请求的详细信息，如请求头、响应头及返回内容等。Source 标签页：用于查看和调试当前页面所加载的脚本的源文件。TimeLine 标签页： 用于查看脚本的执行时间、页面元素渲染时间等信息。Profiles 标签页：用于查看 CPU 执行时间与内存占用等信息。Resource 标签页：用于查看当前页面所请求的资源文件，如 HTML，CSS 样式文件等。Audits 标签页：用于优化前端页面，加速网页加载速度等。Console 标签页：用于显示脚本中所输出的调试信息，或运行测试脚本等。后文会在阐述过程中，会提及使用 Element 标签页探测页面元素并查看该元素的 HTML 内容，也会使用 Source 标签页与 Console 标签页调试脚本及查看调试信息，并不会详细介绍他们的基本功能，请在阅读时提前了解以上相关标签页的基本功能。使用 Chrome 开发者工具巧妙定位脚本代码目前很多的网页应用程序都会使用各种诸如 JavaScript 之类的脚本语言，来增强事件处理、页面展现或是样式控制等方面的功能。很多网站或网络应用系统都已做成单页面模式，该页面只负责加载相关的脚本与样式，这些脚本与样式来负责动态生成更多的子页面或对话框。因此，该类网页应用程序的脚本数量会非常大，从而使开发人员在如此之多的脚本中定位某个问题变得困难起来，但也并非毫无技巧。合理命名模块 ID，根据 ID 找到相关脚本文件。单页面的网络应用程序一般会引入复杂的 JavaScript 框架，如 JQuery, Dojo 或 ExtJS 等。这些框架都支持声明自定义的网页小组件，如 Dojo 中的 widget。一般而言，每一个 widget 会被单独写在一个 JS 文件中。因此，在定义该组件时，可以将储存它的 JS 文件名做为其 id 成员属性的一部分（例如前缀），并在描述该组件的 HTML 模板中，将 id 的值加入到 HTML 标签的属性中。当应用程序在 Chrome 浏览器中运行时，在使用 Chrome 开发者工具的"元素"模块中的元素探测功能查找 HTML 时，可以很直观地看见每一个 div 对应的 JS 文件。因此，当某一个 div 出现问题时，对其 HTML 进行探测后，便可根据其中的 id 定位到相应的脚本文件，从而使问题调试的范围大大缩小。以下通过实际项目中的例子加以说明。清单 1. Dojo 中自定义 widget 引入 id 的声明方式dojo.declare("exc.fe.bijits.FeLogon.FeLogonLogonPanel",[exc.kc._Bijit, dojox.dtl._Templated,], {
templatePath: dojo.moduleUrl('exc.fe.bijits.FeLogon', "FeLogonLogonPanel.html"),
select : null,
SESSION_ID_OFFSET : 0,
sessionid : null,
launchType: "Standard Login",
langcnt: 0,
currentLang:null,
……//省略之后不相关的方法和属性
});在清单 1 中给出的是使用 Dojo 创建自定义 widget 并将该 widget id 引入其模板 HTML 中的方式。自定义的 widget 在继承了 dojox.dtl._Templated 之后，Dojo 有内部机制可将该 widget 声明的名称作为 id 自动加到其 HTML 模板中。因此开发人员只要保证该 widget 声明的名称与其所储存的文件名对应即可。清单 1 中的 id 与储存该脚本的文件名均为"exc.fe.bijits.FeLogon.FeLogonLog--onPanel"。在此前提下，打开浏览器运行网页加载该 widget 后，使用 Chrome 开发者工具的网页元素探测功能找到该 widget，便可看见其 id，即相应的脚本文件，如图 1 所示。如若该 widget 中的行为出现异常，例如 user id 不能进行校验，便可打开其相关的脚本文件进行调试。图 1.
查看 widget 在 HTML 模板中的 id开启运行时错误自动暂停功能，准确定位出错脚本位置在 Chrome 开发者工具中，可以开户运行时错误自动暂停这一功能（如图 2 所示），从而使开发者工具能在发现运行时脚本异常时，在异常脚本处暂停运行，跳转至调试页面，供开发人员进一步查找该运行时异常产生的原因。图 2. Source 面板中的自动暂停按钮自动暂停按钮的下方有一个选项，Pause On Caught Exceptions，如果勾选上，则即使所发生运行时异常的代码在 try/catch 范围内，Chrome 开发者工具也能够在错误代码处停住。合理添加调试日志，通过 Console 标签页定位在进行脚本开发过程中，在重要的方法中添加必要的调试日志输出语句，可以方便开发人员进行问题定位与调试。清单 2 中的 JavaScript 脚本方法中，在其开始和结束处添加了 debug 级别的日志输出，从而使该方法在被执行时，可在 Console 标签页找到相关日志，并且能通过点击该日志的末端文件链接直接跳转到 Source 标签页的脚本源文件中，极大方便了相关代码的定位，如图 3 所示。清单 2. Dojo 中自定义 widget 引入 id 的声明方式_containerSelect : function( /*ContentPane*/ cp ) {
var F = this.declaredClass + "._containerSelect(): ";
console.debug(F,"Starting: ", cp);//当方法被执行时，在控制台输出相关日志
dojo.forEach( this.children, function(child) {
if ( cp.id === child.targetId ) {
this.showChild( child.id );
//-- Save requested module
this._history.push( child.id );
if(this.globalArgs._showModuleTopic)
dojo.publish(this.globalArgs._showModuleTopic, [ child.id,"open" ]);
console.debug(F,"End");//当方法执行结束后，在控制台输出相关日志
},图 3. Console 面板中的日志输出使用 Chrome 开发者工具调试 JavaScript 的技巧与心得上文介绍了 3 种定位相关脚本的方法，在定位脚本之后，通常会对脚本中的部分代码进行调试，本章主要详细讲解高效快捷地利用 Chrome 开发者工具进行 JavaScript 脚本调试的几种技巧与心得。设置条件断点与 Java 调试类似，Chrome 开发者工具提供了断点设置、删除与断点存储等基本功能。同时，开发者工具也提供了设置条件断点的功能，使开发者可以控制该断点只有在满足某一条件时才会被触发。条件断点的设置如图 4 所示，在所需要设置断点的行最前端的行号处点击右键，选择添加条件断点后，会弹出一个对话框用于输入具体的条件。合理运用好条件断点能够提高调试的效率与准确性，使开发人员能更专注于在期望的场景下进行调试。图 4. Source 面板中添加条件断点修改 JavaScript 文件中的代码这是 Chrome 开发者工具提供的一种非常实用的功能，即使开发人员可直接对开发者工具的 Source 标签页中的代码进行修改，并将其保存，使浏览器在下次执行该段脚本时，直接加载最新修改的版本。目前的 Firebug 及 IE 自带的开发者工具都不支持对脚本的直接修改，导致在 Firefox 或 IE 中调试脚本时，如果需要对代码进行修改，需要先去修改脚本源文件，再同步至应用服务器，再清理浏览器缓存，最终再次打开应用程序时，才会看到代码修改后的效果。可见 Chrome 开发者工具提供的这一功能，大大提供了开发者调试脚本的效果。需要注意的是，由于这种修改是保存在浏览器缓存中，因此它不会影响到脚本的源文件。当开发人员决定采用修改之后的脚本时，需要将其复制到脚本的源文件中。使用控制台打印变量值或方法的返回结果当断点被触发进入到调试模式时，我们可以将当前任意存在的变量或方法输入到控制台中，按下回车后，控制台便会返回相关的结果。该功能可使开发人员方便了解程序运行至断点处时各个所需要变量或方法的返回值。需要注意的是，当在控制台中输入的方法名字不带括号时，控制台输出的是该方法所包含的代码信息，而并不是运行结果。结合 Element 标签页调试 JavaScript 中对 CSS 的控制在网页开发过程中，经常需要在脚本中控制不同条件下页面的样式展示，例如要求某一个按钮的颜色在用户停留十秒钟之后由白色变成灰色。此时我们便需要在脚本中通过具体的数值指定这个"灰色"该如何表示，一般情况下我们需要查找相关资料或使用其他工具才能得到期望的"灰色"所对应的 RGB 数值或十六进制数值。然而在 Chrome 开发者工具的 Element 标签页中，其实已经提供了包括该功能在内的一系列对样式进行实时修改的功能，并且在修改之后能够立即从页面中看到变化。图 4 给出的是 Element 标签页的右半部分，当要对某个样式类中的颜色进行修改时，它提供出一个非常直观的图谱供选择，并在下方将其十六进制代码显示出来。开发人员可直接在此进行颜色选择，确定颜色后，在 JavaScript 代码中引用其十六进制数值即可。图 5. Element 面板中的颜色样式编辑结语Chrome 开发者工具的功能丰富而强大，本文着眼于对 JavaScript 的定位与调试，介绍了其中的技巧与心得。相对于 Firebug 与 IE 开发者工具而言，Chrome 所提供的一些独特功能如对脚本源码的直接修改，极大方便了开发者对脚本的开发与调试。随着 Chrome 新版本的推出，相信其开发者工具的功能也会日益增强，我们可以通过阅读其官方更新说明，了解到新功能，借助 Chrome 开发者工具的支持，提高网页应用程序开发与调试的效率。
相关主题 查看，了解最新版本 Chrome 中开发者工具的更新内容。关注，了解 Chrome 及开发者工具的最新发展动态。
阅读文章 ，了解更多 Chrome 开发者工具各模块之间的功能。
阅读文章 ，进一步了解开发者工具各模块之间的具体功能与用法。：通过专门关于 Web 技术的文章和教程，扩展您在网站开发方面的技能。：这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。查看 ，了解更多和 HTML5 相关的知识和动向。
添加或订阅评论，请先或。
有新评论时提醒我
static.content.url=/developerworks/js/artrating/SITE_ID=10Zone=Web developmentArticleID=985818ArticleTitle=使用 Chrome 开发者工具进行 JavaScript 问题定位与调试publish-date=自由、创新、研究、探索
Linux/Windows Mono/DotNet [ Open Source .NET Development/ 使用开源工具进行DotNet软件开发]锐意进取，志存高远.成就梦想，只争朝夕.从你开始，创新世界.【That I exist is a perpetual supprise which is life. Focus on eCommerce】
大家都有用过各种类型的浏览器，每种浏览器都有自己的特色，本人拙见，在我用过的浏览器当中，我是最喜欢Chrome的，因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方。可能大家对console.log会有一定的了解，心里难免会想调试的时候用alert不就行了，干嘛还要用console.log这么一长串的字符串来替代alert输出信息呢，下面我就介绍一些调试的入门技巧，让你爱上console.log
先的简单介绍一下chrome的控制台，打开chrome浏览器，按f12就可以轻松的打开控制台
大家可以看到控制台里面有一首诗还有其它信息，如果想清空控制台，可以点击左上角那个来清空，当然也可以通过在控制台输入console.clear()来实现清空控制台信息。如下图所示
现在假设一个场景，如果一个数组里面有成百上千的元素，但是你想知道每个元素具体的值，这时候想想如果你用alert那将是多惨的一件事情，因为alert阻断线程运行，你不点击alert框的确定按钮下一个alert就不会出现。
下面我们用console.log来替换，感受一下它的魅力。
看了上面这张图，是不是认识到log的强大之处了，下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用。
目前控制台方法和属性有：
["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]
下面我们来一一介绍一下各个方法主要的用途。
一般情况下我们用来输入信息的方法主要是用到如下四个
1、console.log&用于输出普通信息
2、&用于输出提示性信息
3、console.error用于输出错误信息
4、console.warn用于输出警示信息
用图来说话
5、console.group输出一组信息的开头
6、console.groupEnd结束一组输出信息
看你需求选择不同的输出方法来使用，如果上述四个方法再配合group和groupEnd方法来一起使用就可以输入各种各样的不同形式的输出信息。
哈哈，是不是觉得很神奇呀！
7、console.assert对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台
8、console.count（这个方法非常实用哦）当你想统计代码被执行的次数
9、console.dir(这个方法是我经常使用的 可不知道比for in方便了多少)&直接将该DOM结点以DOM树的结构进行输出，可以详细查对象的方法发展等等
10、console.time&计时开始
11、console.timeEnd&&计时结束（看了下面的图你瞬间就感受到它的厉害了）
12、console.profile和console.profileEnd配合一起使用来查看CPU使用相关信息
在Profiles面板里面查看就可以看到cpu相关使用信息
13、console.timeLine和console.timeLineEnd配合一起记录一段时间轴
14、console.trace&&堆栈跟踪相关的调试
上述方法只是我个人理解罢了。如果想查看具体API，可以上官方看看，具体地址为：/devtools/docs/console-api
下面介绍一下控制台的一些快捷键
1、方向键盘的上下键，大家一用就知晓。比如用上键就相当于使用上次在控制台的输入符号
2、$_命令返回最近一次表达式执行的结果，功能跟按向上的方向键再回车是一样的
上面的$_需要领悟其奥义才能使用得当，而0&4则代表了最近5个你选择过的DOM节点。
什么意思？在页面右击选择审查元素，然后在弹出来的DOM结点树上面随便点选，这些被点过的节点会被记录下来，而$0会返回最近一次点选的DOM结点，以此类推，$1返回的是上上次点选的DOM节点，最多保存了5个，如果不够5个，则返回undefined。
3、Chrome 控制台中原生支持类jQuery的选择器，也就是说你可以用$加上熟悉的css选择器来选择DOM节点
4、copy通过此命令可以将在控制台获取到的内容复制到剪贴板
（哈哈 刚刚从控制台复制的body里面的html可以任意粘贴到哪 比如记事本 &是不是觉得功能很强大）
5、keys和values&前者返回传入对象所有属性名组成的数据，后者返回所有属性值组成的数组
说到这，不免想起console.table方法了
6、monitor & unmonitor
monitor(function)，它接收一个函数名作为参数，比如function a,每次a被执行了，都会在控制台输出一条信息，里面包含了函数的名称a及执行时所传入的参数。
而unmonitor(function)便是用来停止这一监听。
看了这张图，应该明白了，也就是说在monitor和unmonitor中间的代码，执行的时候会在控制台输出一条信息，里面包含了函数的名称a及执行时所传入的参数。当解除监视（也就是执行unmonitor时）就不再在控制台输出信息了。
下面看一下console.log的一些技巧
1、重写console.log 改变输出文字的样式
2、利用控制台输出图片
3、指定输出文字的样式
&最后说一下chrome控制台一个简单的操作，如何查看页面元素，看下图就知道了
你在控制台简单操作一遍就知道了，是不是觉得很简单！
阅读(...) 评论()
随笔 - 16184
评论 - 1402