Web调试技巧——对象跟踪

﹏ヽ暗。殇╰゛Y 2024-02-17 22:54 41阅读 0赞

做web的离不开两个常用对象：json 对象 和 dom 对象

有的时候在调试的时候知道得到的是个对象，也对这个对象做点儿“手脚”，可是就是不知道

这个对象中用什么东西？这下就郁闷了，进入了浑浑噩噩的疯狂试验中~~~~~

现在说一下如何简单区分上面的两个对象（所有测试都是在IE中进行，不保证其它浏览器支持！）

调试步骤：——————————————————

1.确定对象类型

很简单了，使用alert 弹出看看弹出内容是什么就OK了

如果弹出的内容是 \[Object Object\] ，那多半就是 json 对象了

如果弹出的内容类似\[object HTML.......\] 格式，那肯定是 html 的 dom 对象了

2.确定了对象类型，接下来就是要看对象的代码段内容了

2.1 如果是 HTML DOM 对象

直接用 alert(dom1.outerHTML); 就可以弹出 dom 元素了

2.2 如果是 json 对对象

使用 alert(String.toSerialize(myjson)); 就OK了

注意：String.toSerialize() 方法是自己封装的

测试代码段如下：——————————————————

<body>  
<div id="mydiv">  
<span id ="myspan" >hello world!</span>  
</div>  
<input type="button" onClick="test()" value="Test"></button>

<script language="javascript">  
var myjson=\[\{id:"i1",value:"v1"\},\{id:"i2",value:"v2"\}\]  
var dom1 = document.getElementById("mydiv");  
function test()  
\{  
//1.查看对象类型  
alert(dom1);  
alert(myjson);

//2.发序列化对象对象内容  
//2.1 如果是 dom 元素  
alert(dom1.outerHTML);  
//2.2 如果是 json 元素  
alert(String.toSerialize(myjson));

\}

String.format = function (str)  
\{  
if (arguments.length == 0)  
return null;

var str = arguments\[0\];  
for (var i = 1; i < arguments.length; i++)  
\{  
var re = new RegExp('\\\\\{' + (i - 1) + '\\\\\}', 'gm');  
str = str.replace(re, arguments\[i\]);  
\}  
return str;  
\};  
/\*对string 对象的扩展\*/  
/\*对象序列化为字符串\*/  
String.toSerialize = function (obj)  
\{  
var ransferCharForJavascript = function (s)  
\{  
var newStr = s.replace(  
/\[\\x26\\x27\\x3C\\x3E\\x0D\\x0A\\x22\\x2C\\x5C\\x00\]/g,  
function (c)  
\{  
ascii = c.charCodeAt(0);  
return '\\\\u00' + (ascii < 16 ? '0' + ascii.toString(16) : ascii.toString(16));  
\}  
);  
return newStr;  
\}  
if (obj == null)  
\{  
return null  
\}  
else if (obj.constructor == Array)  
\{  
var builder = \[\];  
builder.push("\[");  
for (var index in obj)  
\{  
if (typeof obj\[index\] == "function") continue;  
if (index > 0) builder.push(",");  
builder.push(String.toSerialize(obj\[index\]));  
\}  
builder.push("\]");  
return builder.join("");  
\}  
else if (obj.constructor == Object)  
\{  
var builder = \[\];  
builder.push("\{");  
var index = 0;  
for (var key in obj)  
\{  
if (typeof obj\[key\] == "function") continue;  
if (index > 0) builder.push(",");  
builder.push(String.format("\\"\{0\}\\":\{1\}", key, String.toSerialize(obj\[key\])));  
index++;  
\}  
builder.push("\}");  
return builder.join("");  
\}  
else if (obj.constructor == Boolean)  
\{  
return obj.toString();  
\}  
else if (obj.constructor == Number)  
\{  
return obj.toString();  
\}  
else if (obj.constructor == String)  
\{  
return String.format('"\{0\}"', ransferCharForJavascript(obj));  
\}  
else if (obj.constructor == Date)  
\{  
return String.format('\{"\_\_DataType":"Date","\_\_thisue":\{0\}\}', obj.getTime() - (new Date(1970, 0, 1, 0, 0, 0)).getTime());  
\}  
else if (this.toString != undefined)  
\{  
return String.toSerialize(obj);  
\}  
\};  
</script>

发表评论取消回复

表情：

评论列表（有 0 条评论，41人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java Web开发：常见错误和调试技巧实例

在Java Web开发中，常见的错误和调试技巧包括： 1. **语法错误**：这是最常见的错误，比如拼写错误、括号未闭合等。调试时，IDE会提示错误位置。 2. **逻辑错

布满荆棘的人生/ 2024年09月20日 00:54/ 0 赞/ 56 阅读

相关 Web调试技巧——对象跟踪

做web的离不开两个常用对象：json 对象和 dom 对象有的时候在调试的时候知道得到的是个对象，也对这个对象做点儿“手脚”，可是就是不知道这个对象中用什么东西？这

﹏ヽ暗。殇╰゛Y/ 2024年02月17日 22:54/ 0 赞/ 42 阅读

相关 WEB会话跟踪

一、什么叫会话跟踪记录用户一段时间内的逻辑上相关联的不同访问请求个过程叫“会话跟踪”。通过用户在每次对服务请求时的唯一标识，可以跟踪会话。二、会话跟踪产生的原因

秒速五厘米/ 2023年10月17日 11:34/ 0 赞/ 103 阅读

相关 java web状态跟踪_Java Web 会话跟踪（四）

会话跟踪是Web程序中常用的技术，用来跟踪用户的整个会话。常用的会话跟踪技术有Cookie与Session。Cookie通过在客户端记录信息确定用户身份，Session通过在服

忘是亡心i/ 2022年11月10日 01:19/ 0 赞/ 197 阅读

相关 Android调试技巧

一、基本使用 Debug App有两种途径，第一种是直接点击下图运行按钮右侧的小虫状图标，运行并调试当前Project，这个我想大家都知道。 ![在这里插入图片描述]

￡神魔★判官ぃ/ 2022年10月20日 05:23/ 0 赞/ 241 阅读

相关源代码跟踪技巧

源代码跟踪技巧一、在本机源代码编译调试二、注意控制台的输出日志三、一个断点包含多个方法调用时，可以用鼠标指定进入哪个方法调用。四、可以用E

今天药忘吃喽~/ 2022年09月09日 04:53/ 0 赞/ 122 阅读

相关 PLSQL调试技巧

1：调试技巧大家调试游标的时候通常使用的都是直接在存储过程里DBMS\_OUTPUT包来进行打印信息的，示例如下： CREATE OR REPLACE PROCEDURE

╰半橙微兮°/ 2022年06月11日 05:22/ 0 赞/ 396 阅读

相关【JavaScript】console控制台调试技巧 | JavaScript调试技巧

　　对于前端开发者来说，在开发过程中需要监控某些表达式或变量的值的时候，用 debugger 会显得过于笨重，取而代之则是会将值输出到控制台上方便调试。最常用的语句就是cons

分手后的思念是犯贱/ 2022年06月05日 05:42/ 0 赞/ 799 阅读

相关 Chrome 调试技巧

平时工作中常用的就是谷歌浏览器了，就因为其控制台比较清晰，整洁，方便实用，以下是平时工作中常用到的谷歌浏览器控制台调试技巧。 alert 这个不用多说了，不言自明。 co

冷不防/ 2022年05月08日 05:34/ 0 赞/ 390 阅读

相关 shiro认证调试过程跟踪

一问题提出看代码时候，我看到下面一个函数verify，我想弄清楚代码是怎么跑到这个函数。 / @className: JwtUtil @de

妖狐艹你老母/ 2021年07月24日 13:59/ 0 赞/ 342 阅读