`
278506470
  • 浏览: 10807 次
  • 性别: 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说再见吧。

分享到:
评论
53 楼 jessdy 2008-10-28  
很好,支持这样的东西
52 楼 hideto 2008-10-28  
king_108 写道
hideto 写道
afcn0 写道
楼上大哥,我找了半天没找到FireDebug,请问是什么软件,提供个连接,谢谢

这位仁兄真是幽默啊,笑死我了



这个世界是由百度和GOOGLE的

笑爆了啊,麻烦知道FireDebug这个软件的告诉我一下啊
51 楼 helin 2008-10-26  
很好很强大...楼上功底很深..
50 楼 king_108 2008-10-24  
hideto 写道
afcn0 写道
楼上大哥,我找了半天没找到FireDebug,请问是什么软件,提供个连接,谢谢

这位仁兄真是幽默啊,笑死我了



这个世界是由百度和GOOGLE的
49 楼 hejin1026 2008-10-24  
不知道firebug的,你干脆回火星去,不用firebug的,真为你感到可惜,不过目前IE中调试还是有点麻烦,IE8 Beta2 的调试,难用,楼猪提供的这个东西,怎么使用啊,看了下评论好象很多人也不知道,楼猪不但不会解释,还误解,你就给了这么个代码,没说明怎么用啊,举个例子啊
48 楼 rmn190 2008-10-24  
对呀,这个blackbird能不能说设置断点?能不能单步执行? 我觉得这个功能最重要.
47 楼 hideto 2008-10-23  
afcn0 写道
楼上大哥,我找了半天没找到FireDebug,请问是什么软件,提供个连接,谢谢

这位仁兄真是幽默啊,笑死我了
46 楼 yangyi 2008-10-23  
看样子大家都没试过IE8 Beta2
45 楼 278506470 2008-10-23  
struas 写道

下载弄了很久都没搞出来 请指点


不会吧!这有不是很难,如果ls指的是博客中所指的方式进行调试,只需要将所提供的下载连接下载,同时将博客中的html代码另存为一个html的文档。注意引用的路径正确,就可以了。
可以直接使用博客中的example就可以了。
44 楼 struas 2008-10-23  
下载弄了很久都没搞出来 请指点
43 楼 278506470 2008-10-22  
unique.wu 写道
这东西怎么使用的?
真希望有个好一点的工具来调试js



博客中的一个html的example 已经表示的很清楚了吧!,看这个example就可以了。
42 楼 unique.wu 2008-10-22  
这东西怎么使用的?
真希望有个好一点的工具来调试js

41 楼 gongmingwind 2008-10-22  
kaka2008 写道
    刚看到新闻这个新闻是,觉得比较新鲜,自己试着弄了弄,没出来,经LZ指点,才知道少了一句话。

    可是,昨天调试代码时,还是不自觉用了alert(),想想,还是alert()好用。

    怎么说呢,就像大家使用浏览器时,首选是IE一样。(平时用chrome,但开发时用IE)

    可能是习惯问题吧,毕竟从刚开始学就用alert.

--
有点保守了....
40 楼 gongmingwind 2008-10-22  
还不错,呵呵,蛮好用的
39 楼 xxpniu 2008-10-21  
搞 js  的 难道不用firebug吗?
不用的只能说明你搞的js不是标准api
38 楼 278506470 2008-10-21  
这个还是看大家的习惯了,不强求,哈哈!
37 楼 kaka2008 2008-10-21  
278506470 写道
kaka2008 写道
    刚看到新闻这个新闻是,觉得比较新鲜,自己试着弄了弄,没出来,经LZ指点,才知道少了一句话。

    可是,昨天调试代码时,还是不自觉用了alert(),想想,还是alert()好用。

    怎么说呢,就像大家使用浏览器时,首选是IE一样。(平时用chrome,但开发时用IE)

    可能是习惯问题吧,毕竟从刚开始学就用alert.


  小片段的代码使用alert()试无关紧要的,就像建小房子不需要设计师,如果纯粹的大量的javascript编程,使用这些工具还是很可取的。提高编码效率。


或许吧。

正如你所说,我的确实是小片段的代码,没见过大量的javascript代码。

以前刚接触ajax时,听说人家写过一个多M的js代码,我滴娘啊。
36 楼 Eaven 2008-10-21  
278506470 写道
278506470 写道

peacock 写道
VS虽然超级庞大,但是运行速度超级快,是所有IDE开发工具最快的,只需要1秒左右的时间,简直无法想象微软是怎么做到的!而且占用内存也相当的小 VS的功能更是没的说,强!但是我还是不喜欢,感觉装个东西很麻烦!


我赞成,有同感!不喜欢在机器上装太多的东西了。

35 楼 Eaven 2008-10-21  
Eaven 写道
en

34 楼 278506470 2008-10-21  
kaka2008 写道
    刚看到新闻这个新闻是,觉得比较新鲜,自己试着弄了弄,没出来,经LZ指点,才知道少了一句话。

    可是,昨天调试代码时,还是不自觉用了alert(),想想,还是alert()好用。

    怎么说呢,就像大家使用浏览器时,首选是IE一样。(平时用chrome,但开发时用IE)

    可能是习惯问题吧,毕竟从刚开始学就用alert.


  小片段的代码使用alert()试无关紧要的,就像建小房子不需要设计师,如果纯粹的大量的javascript编程,使用这些工具还是很可取的。提高编码效率。

相关推荐

    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