`
278506470
  • 浏览: 10806 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

和alert()说再见

阅读更多

  今天网上随便了溜达了一圈,发现了一个很好的javascript调试器,类似于java的控制台功能,以往调试javascript会输出n个alert的断点,调试很花时间。尽管这样的一个工具,很简单,自己也可以糊弄一个,网上既然提供了一个那又何必自己写呢,我只写网上没有的,哈哈,又开始吹了!

 

  我写了一个很小的测试工具,供大家参考,代码如下 :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
input {
    border:1px solid #000000;
    width:100px;
}
table{
    border:1px solid #000000;
    width:600px;
}
td{
    padding:5px;
}
</style>
<script type="text/javascript" src="blackbird.js"></script>
<link type="text/css" rel="Stylesheet" href="blackbird.css" />
<script language="JavaScript">
<!--
var NAMESPACE = "bb" ;
//-->
</script>
</head>

<body>

<table>
<tr>
	<td><input type="button" value="显示/隐藏" onclick="log.toggle()"/></td>
	<td>log.toggle( )</td>
    <td>显示/隐藏调试信息面板</td>
</tr>
<tr>
	<td><input type="button" value="改变大小" onclick="log.resize()"/></td>
	<td>log.resize( )</td>
	<td>改变面板大小</td>
</tr>
<tr>
	<td><input type="button" value="调试" onclick="log.debug('debug') "/></td>
	<td>log.debug( Message )</td>
	<td>输出调试信息</td>
</tr>
<tr>
	<td>
    <input type="button" value="消息" onclick="log.info(window.prompt('请输入值!','请输入值')) "/>
    </td>
	<td>log.info( Message )</td>
	<td>输出消息</td>
</tr>
<tr>
	<td><input type="button" value="警告" onclick="log.warn('worn') "/></td>
	<td>log.warn( warn )</td>
    <td>输出警告</td>
</tr>
<tr>
	<td><input type="button" value="错误" onclick="log.error('error') "/></td>
	<td>log.error( reeor )</td>
    <td>输出错误信息</td>
</tr>
<tr>
	<td><input type="button" value="计时" onclick="log.profile('local anchors') "/></td>
	<td>log.profile( profile )</td>
    <td>开始/结束计时</td>
</tr>

<tr>
	<td><input type="button" value="清空" onclick="log.clear() "/></td>
	<td>log.profile( )</td>
	<td>清空调试消息</td>
</tr>
</table>

<br><br>
<table>
<tr>
	<td>F2</td>
	<td>显示/隐藏</td>
</tr>
<tr>
	<td>Shift+F2</td>
	<td>移 动(move)</td>
</tr>
<tr>
	<td>Alt + Shift + F2</td>
	<td>清 空</td>
</tr>
<tr>
	<td colspan="2">单击左上图标可以进行类型过滤;或者Alt + 单击</td>
</tr>
</table>

</body>
</html>

 

 

注意最顶端的一行代码,很重要

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

 我刚开始,就是因为这里没有写完整,一直都不能显示。

 

同时我将其源码js、css和图片提供给大家,让我们和alert说再见吧。

分享到:
评论
13 楼 278506470 2008-10-19  
发呢?是不是也要装一个vs?
kaka2008 写道

278506470 写道


&nbsp;
注意最顶端的一行代码,很重要


Html代码

&lt;!DOCTYPE&nbsp;html&nbsp;PUBLIC&nbsp;"-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Transitional//EN"&nbsp;"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&nbsp;&nbsp;&nbsp;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&nbsp;
就这句话惹的祸,那天看到那个新闻,自己试了一会儿,没弄出来,今天看了才知道。
&nbsp;
3Qs.

  哈哈!看来大家都有相同的问题了,看来交流是必须的,很高兴能够为别人带来帮助。
12 楼 kaka2008 2008-10-19  
<div class='quote_title'>278506470 写道</div>
<div class='quote_div'>
<p><span style='font-size: 13px;'><br/></span></p>
<p> </p>
<p><span style='font-size: small;'>注意最顶端的一行代码,很重要</span></p>
<pre name='code' class='html'>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; </pre>
<p> </p>
</div>
<p>就这句话惹的祸,那天看到那个新闻,自己试了一会儿,没弄出来,今天看了才知道。</p>
<p> </p>
<p>3Qs.</p>
11 楼 kimmking 2008-10-19  
278506470 写道
kimmking 写道

vs的调试器的强悍之处在于(不仅仅是alert logger): 1、监视表达式 2、单步 3、断点 4、本地变量的值 5、后退

如果不是.net 开发呢?是不是也要装一个vs?

可以选择只安装.net核心部分,去掉c#,vb.net,c++这些东西
10 楼 278506470 2008-10-19  
kimmking 写道

vs的调试器的强悍之处在于(不仅仅是alert logger): 1、监视表达式 2、单步 3、断点 4、本地变量的值 5、后退

如果不是.net 开发呢?是不是也要装一个vs?
9 楼 kimmking 2008-10-19  
vs的调试器的强悍之处在于(不仅仅是alert logger):
1、监视表达式
2、单步
3、断点
4、本地变量的值
5、后退
8 楼 278506470 2008-10-18  
jzshmyt 写道

创意无限,简单实用 javascript-logger 本人自己写的javascript日志工具,大家不妨去看看. 一行js代码搞定所有的事情. GoogleCode:http://code.google.com/p/dewind/ Download:http://dewind.googlecode.com/files/beta-20081017.rar 


楼上的大哥简直是天才啊,很强了,能够写出这种js调试工具,如此之前面,小弟很佩服。
7 楼 jzshmyt 2008-10-18  
创意无限,简单实用 javascript-logger
本人自己写的javascript日志工具,大家不妨去看看.
一行js代码搞定所有的事情.

GoogleCode:http://code.google.com/p/dewind/
Download:http://dewind.googlecode.com/files/beta-20081017.rar


6 楼 boin 2008-10-18  
afcn0 写道
楼上大哥,我找了半天没找到FireDebug,请问是什么软件,提供个连接,谢谢


Firebug吧,

Windows下有MS自家的Debugger足够了

PS:何必呢 
5 楼 kimmking 2008-10-18  
visual studio 2008带的脚本调试器最好使。
4 楼 278506470 2008-10-18  
afcn0 写道

楼上大哥,我找了半天没找到FireDebug,请问是什么软件,提供个连接,谢谢


  这是一款针对firefox下javascript开发的debugger扩展。扩展自身内含了Venkman(一套针对基于mozilla浏览器的debugger环境)。也就是一个firefox的一个调试工具。
  软件名称:Firefox的js debugger工具JavaScript Debugger-0.9.87.3。

  可以到http://www.lupaworld.com/?action-download-itemid-3948上下载。
3 楼 afcn0 2008-10-18  
楼上大哥,我找了半天没找到FireDebug,请问是什么软件,提供个连接,谢谢
2 楼 278506470 2008-10-18  
picora 写道
有FireDebug好用么


  在IE上,我觉得这个还是比较不错的一个调试工具,功能比较全面,调试信息分类,同时可以实现过滤调试信息,允许键盘快速操作,而且是开源的,在此基础上,开发人员可以自由发挥自己的天才!
  IE是大众浏览器,Fire好像很少有人在用。
1 楼 picora 2008-10-18  
有FireDebug好用么

相关推荐

    jsalert,confirm,prompt的用法(附加一段有用的alert代码.pdf

    总的来说,`alert()`、`confirm()`和`prompt()`是JavaScript中最基础的用户交互手段,虽然简单但功能实用。理解并合理运用它们,可以帮助开发者构建更加互动和友好的网页应用程序。然而,为了提供更高级的用户体验,...

    扰流警报「Spoiler Alert」-crx插件

    阻止来自Facebook新闻传送的潜在电视节目和体育剧透。 SpoilerAlert是一款谷歌浏览器...现在,与SpoilerAlert说再见那些不必要的职位!只要告诉我们你要遵循什么,剩下的就做好了。 支持语言:English (United States)

    DOM学习笔记

    例如:`&lt;body onunload="alert('再见,期待您的下次访问!')"&gt;` - **Onbeforeunload**:页面即将关闭时触发的事件,可用于提示用户。例如:`您确定要离开吗?';"&gt;` - **鼠标事件与键盘事件**: - **Window.event*...

    JS监听关闭浏览器事件

    这通常涉及到`onbeforeunload`和`onunload`这两个事件处理程序。 #### 1. `onbeforeunload`事件 `onbeforeunload`事件是在用户尝试关闭窗口、标签页或者刷新页面时触发的。这是一个非常有用的事件,因为它允许...

    八种常用JavaScript小程序集锦

    &lt;body bgcolor="#fef4d9" onUnload="window.alert('再见了!欢迎下次再来!')"&gt; ``` **说明:** 这两个示例分别演示了如何在用户离开页面时弹出一个新的窗口或显示一个提示框来与用户告别。这对于增加用户的情感...

    JavaScript 正则表达式

    ')" onunload="alert('再见!')"&gt; ``` - 这段代码定义了`&lt;body&gt;`标记,在文档加载完成后会显示“网页读取完成,请慢慢欣赏!”的消息框,在用户离开文档时会显示“再见!”的消息框。 - **在JavaScript中指定**: ...

    代码\代码文件各种动画数字时钟

    &lt;body onunload="window.alert('再见!请访问我们的网站http://2929.2000y.net/')"&gt; ``` 这段代码会在用户离开页面时显示一条告别消息。 ### 5. 实现飞花和雪花特效 除了上述代码外,文章还提到了实现飞花和雪花...

    JQuery Tips相关(1)—-关于$.Ready()

    总的来说,$(document).Ready()、OnLoad事件和$(window).load()都是确保代码在适当时间执行的方法,各有优缺点。理解它们之间的区别和适用场景,能帮助开发者编写出更加高效、流畅的前端代码。在实际项目中,根据...

    javascript中运用闭包和自执行函数解决大量的全局变量问题

    但是从全局看来,这样会导致出现一些让我们难以掌控的情况的出现:变量... // 定义一个全局变量 var msg2 = “再见!” //定了另一个全局变量 [removed] = function() { alert&#40;msg1&#41;; } [removed] = function()

    JavaScript入门教程(11) js事件处理

    ')" onunload="alert('再见!')"&gt; ``` 这样,当页面加载完毕或关闭时,对应的警告框会被显示。 2. **方法二:编写特定对象特定事件的JavaScript**。这种方式相对较少用,但有时非常有用。例如: ```html ...

    每天一篇javascript学习小结(Date对象)

    在今天的学习小结中,我们将深入了解JavaScript中的Date对象,并对其基本使用方法进行梳理。Date对象是JavaScript中非常重要的内置对象,它允许我们处理日期和...希望以上的知识点对您有帮助,我们明天的学习小结再见。

    常用的javascript 验证

    alert(strMsg + "未填写!"); return true; } return false; } ``` ### 2. 判断输入是否为中文字符 (isChinese) 此函数用于判断输入的字符串`str`是否全部由中文字符组成。它首先定义了一个包含所有非中文字符...

Global site tag (gtag.js) - Google Analytics