使用IE的地址栏来辅助调试Web页脚本_javascript技巧

不小心使用Shift + Left Click去点击了一个链接目标(href)是脚本的超链接,结果却把是否调试脚本的对话框弄了出来。点击yes居然可以打开调试这一句脚本,可是这句脚本是哪里来的呢?
    
     回头看看被新打开的那个IE,结果地址栏里就写着:javascript:open(url)呢。原来IE的地址栏可以使用"JavaScript:"这个声明来执行脚本也,在试试JavaScript:alert('ok'),果然ok!

     好玩的特性,再写点复杂的脚本:javascript: var s=''; for( var i=0; i < 10 ; i++ ) s +=i;。结果是出来了"0123456789",可是执行结果显示在浏览器的主显示区域里了,把IE里原有的内容弄没了。要是可以不影响原有的页面,岂不是可以读些页面里的内容,修后继续提交吗?其实可以办到了,只要保证脚本最有一句是alert(),在浏览器里执行完脚本后就不会跳离当前页面的内容。例如打开http://www.google.com,在地址栏里输入:javascript: document.getElementsByTagName('Input')[1].disabled = true; alert('');,会看见什么呢?不能输入查询关键字了吧?

     其实在地址栏里运行脚本的作用域就是当前页面的脚本作用域,利用这个特点我们除了可以简单的执行脚本语句,还可以辅助我们调试脚本,比如我希望察看一些变量的值,而我们又不需要进入复杂的调试模式。下图就是我调试popup菜单时的一个例子,用这个办法可以避免在代码调试时到处写status=...。
    
     这里我们除了可以在地址栏里写JavaScript:外,同时还可以写vbscirpt: alert("ok!"),ecmascript:和jscirpt。不过ecmascript会自动被转为javascirpt,jscript会被转为vbscript。

     这个特性虽然简单,希望大家都能来玩玩,并且玩出更多的花样哦。

时间: 2024-10-11 06:42:32

使用IE的地址栏来辅助调试Web页脚本_javascript技巧的相关文章

js调试系列 初识控制台_javascript技巧

写在最开头:其实我以前就在考虑要不要写这个东西,因为这个东西确实不难,但是为什么会有这么多人问,他们问的不是怎么用控制台,而是不知道控制台能干嘛,他们也知道有 console.log 之类的东西,但他们不知道为什么要用这么长的字符串代替 alert 输出信息.在他们眼里 alert 足以.好吧,我承认小小的吐槽了下,不过这个系列我只打算介绍下调试的基本知识,不会涉及太深,因为深入的东西结合js知识,如果你js没到一个境界,我就算教你调试bug,破解一些插件之类的,你也根本不知道我在做什么.我的目

ie 调试javascript的工具_javascript技巧

做 web开发的朋友都清楚,js程序的调试是相当郁闷的,因为首先这种语言语法比较灵活,它是一种弱类型的脚本语言,很多错误是无法控制的,这些不谈,最痛苦的是没有什么好的调试工具,现在的情况比以前稍好,在Firefox下还有firebug,这的确是一个不错的js调试工具,但在IE下使用就很麻烦,而且效果很不好,鄙人一直苦于寻找一个很好的IE下的js调试工具,能够自动捕获错误,并定位位置和原因,没想到今天竟在无意中寻找到了这么个好工具,不敢私藏,共享出来,希望能为各位web开发者带来方便 这个工具的名

Aptana调试javascript图解教程_javascript技巧

前提是安装 Firebug 插件 和aptanadebugger 插件,他们的下载地址如下: http://getfirebug.com/releases/firebug/1.2/firebug-1.2.0.xpi http://firefox.aptana.com/update/aptanadebugger.xpi 开始调试: 选择你所需要的调试的html文件,右键点击"Debug As" 下的 "Debug..." ,其中左侧菜单中要选用 "Web B

chrome调试javascript详解_javascript技巧

一.Console API Console.assert() 判断第一个参数是否为真,false的话抛出异常并且在console输出相应信息. Console.count() 以参数为标识记录调用的次数,调用时在console打印标识以及调用次数. Console.debug() console.log方法的别称,使用方法可以参考Console.log() Console.dir() 打印一条以三角形符号开头的语句,可以点击三角展开查看对象的属性. Console.error() 打印一条错误信

在vs2010中调试javascript代码方法_javascript技巧

操作步骤如下: 1. javascript代码中插入:debugger,如下: <script type="text/javascript"> debugger; </script> 2.将IE浏览器中的"禁止脚本调试"这一项的勾给去掉. 然后在点击vs中的调试即可.

Javascript实现Web颜色值转换_javascript技巧

最近一直忙碌于完成业务需求,好长时间没有写博客了.今天稍微有些时间,翻看了一下最近项目中的一些前端代码,看到Web颜色转换功能的时候,突然想到当我们在做一些颜色设置/编辑的需求时,经常会涉及到各种颜色值格式的互换.于是我决定记录一下我在做这一部分功能的时候是如何实现的,写下来和大家分享一下,希望读者们各抒己见,多多交流. 先看看问题 问题一,当我们在进行网页前端开发的时候,经常会使用 dom.style.backgroundColor = "#f00" 来设置某个 DOM 元素的背景颜

15 个 JavaScript Web UI 库_javascript技巧

几乎所有的富 Web 应用都基于一个或多个 Web UI 库或框架,这些 UI 库与框架极大地简化了开发进程,并带来一致,可靠,以及高度交互性的用户界面.本文介绍了 15 个非常强大的 JavaScript Web UI 库,非常适合各种各种规模的富 Web 应用的开发. LivePipe LivePipe UI 基于 Prototype Javascript 框架,包含了一整套经严格测试并高度可扩展的 UI 控件,拥有很好的文档,在不支持 JavaScript 的环境中,可以无缝降级使用.包括

js仿腾讯QQ的web登陆界面_javascript技巧

用了腾讯QQ也有将近十年了,今天心血来潮想模仿腾讯QQ的登陆面板做一个web版的登陆面板,然后参考了一些代码,自己模仿,学写了一个.  效果如下:  其中还实现了拖动面板,选择状态的效果 下面是具体代码: 1.index.html  <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>拖动</title> <link href

使用Firebug对js进行断点调试的图文方法_javascript技巧

具体步骤: a. 打开Firebug后,启用"脚本"调试,找到引用的脚本文件(或者行内js): b. 在适当的位置加入断点: c. 如果断点已经执行过,则刷新页面,这时脚本就会在断点处中断.如果断点没有执行过,那可以直接执行页面上的动作(例如点击按钮等),然后代码会在断点处中断: d. 观察函数调用栈,观察local变量,也可以进行单步执行,进行调试. 确实非常简单!用Firebug断点调试的优点总结如下: 能加断点的行用绿色行号,非常直观: call stack用两种方式显示出来,很