|
|
工具版本兼容问题
Javascript的运行和Java不一样，没有一个像ecipse这样的集成开发环境(IDE)。
尤其在刚开始学习的时候，更加推荐直接使用记事本来编写，而不是依赖于其他的有提示功能的编辑器( Sublime)，这样更加利于暴露自己编写的javascript代码的问题，并纠正和学习。
但是依然存在一个调试的问题，本知识点只是讲解各种调试的办法。
步骤
1
:
alert进行调试
步骤
2
:
使用专业的调试工具
步骤
3
:
下载firefox
步骤
4
:
使用firefox 的调试功能
步骤
5
:
console.log()
使用alert(1)进行调试，这是最开始的时候非常常用的一种手法来进行javascript代码调试，即使今天，也是比较有效的一种方式。 使用alert的思路：
alert(1)
会弹出一个对话框，里面的内容是1。换句话说，如果弹出了1,这个位置以上的代码，都是可以运行的。 你不停的把alert(1)向下移动，当移动到某一行之后，就不再弹出，那么就证明那一行运行有问题。 这样就把问题的范围缩小了，就很容易通过 肉眼观察法来定位真正问题所在。
");
window.frames["iframe_show2896"].document.write(decodeHtml($("textarea#stepcodeTextarea2896").val()));
window.frames["iframe_show2896"].document.close();
$(window.frames["iframe_show2896"]).load(function(){
$("#iframe_show2896").height($("#iframe_show2896").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2896").height($("#iframe_show2896").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script>
x = 10;
//alert(1);
document.write("没有用var声明的变量x的值:"+x);
//alert(2);
</script>
<script>
x = 10;
//alert(1);
document.write("没有用var声明的变量x的值:"+x);
//alert(2);
</script>
");
window.frames["iframe2896"].document.write(decodeHtml(code2896));
window.frames["iframe2896"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2896"]).load(function(){
$("#iframe2896").height($("#iframe2896").contents().find("body").height()+showittryitheight);
});
$("#iframe2896").height($("#iframe2896").contents().find("body").height()+showittryitheight);
alreadyWriteCode2896 = code2896;
$("#rendering2896").hide();
$("#rendered2896").show();
}
var tRereshRetry2DemoPanel2896 = setInterval(rereshRetry2DemoPanel2896,1000);
var binded2896 = false;
$("textarea#stepcodeTextarea2896").keyup(function(){
if(!binded2896){
$(window).bind('beforeunload',function(){
binded2896 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2896 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2896!=newCode){
// window.frames["iframe2896"].document.write("
");
// window.frames["iframe2896"].document.write(decodeHtml($("textarea#stepcodeTextarea2896").val()));
// window.frames["iframe2896"].document.close();
// $(window.frames["iframe2896"]).load(function(){
// $("#iframe2896").height($("#iframe2896").contents().find("body").height()+showittryitheight);
// });
// code2896 = newCode;
// }
});
$(".tryButton2896").click(function(){
$("#tryDiv2896").show();
$("#stepcodeTextarea2896").focus();
$("#stepcodeTextarea2896").height(200);
$("#iframe2896").height(0);
window.frames["iframe2896"].document.write("
");
window.frames["iframe2896"].document.write(decodeHtml($("textarea#stepcodeTextarea2896").val()));
window.frames["iframe2896"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2896"]).load(function(){
$("#iframe2896").height($("#iframe2896").contents().find("body").height()+showittryitheight);
});
$("#iframe2896").height($("#iframe2896").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2896.focus();
editor2896.setSize(null, "250");
$("#rendering2896").hide();
$("#rendered2896").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor2896 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2896"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor2896.on("change",function(doc){
if(!binded2896){
$(window).bind('beforeunload',function(){
binded2896 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2896 = newCode;
$("textarea#stepcodeTextarea2896").val(newCode);
if(alreadyWriteCode2896!=code2896){
lastModifedTime2896 = new Date().getTime();
$("#rendering2896").show();
$("#rendered2896").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2896 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2896.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2896").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
不同的浏览器有不同的调试办法，本文以firefox为例来讲解如何调试
步骤
4
:
使用firefox 的调试功能
顶
折
这里准备了一段故意写错的javascript代码。
点击快捷键F12，就会出现console页面。
console是控制台的意思，用于输出一些错误和调试信息。
注意： 虽然这段javascript代码有错误，但是第一次F12是看不到错误的，因为错误已经发生了，才打开了F12。 所以打开了F12之后，使用快捷键F5刷新一下当前页面，就可以看到控制台报出了错误的原因
document.write1 is not a function
这样定位问题就非常方便了。
");
window.frames["iframe_show2901"].document.write(decodeHtml($("textarea#stepcodeTextarea2901").val()));
window.frames["iframe_show2901"].document.close();
$(window.frames["iframe_show2901"]).load(function(){
$("#iframe_show2901").height($("#iframe_show2901").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2901").height($("#iframe_show2901").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
这是一段故意写错的write方法的javascript代码
<script>
x = 10;
document.write1("这是一段故意写错的write方法的javascript代码");
</script>
这是一段故意写错的write方法的javascript代码
<script>
x = 10;
document.write1("这是一段故意写错的write方法的javascript代码");
</script>
");
window.frames["iframe2901"].document.write(decodeHtml(code2901));
window.frames["iframe2901"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2901"]).load(function(){
$("#iframe2901").height($("#iframe2901").contents().find("body").height()+showittryitheight);
});
$("#iframe2901").height($("#iframe2901").contents().find("body").height()+showittryitheight);
alreadyWriteCode2901 = code2901;
$("#rendering2901").hide();
$("#rendered2901").show();
}
var tRereshRetry2DemoPanel2901 = setInterval(rereshRetry2DemoPanel2901,1000);
var binded2901 = false;
$("textarea#stepcodeTextarea2901").keyup(function(){
if(!binded2901){
$(window).bind('beforeunload',function(){
binded2901 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2901 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2901!=newCode){
// window.frames["iframe2901"].document.write("
");
// window.frames["iframe2901"].document.write(decodeHtml($("textarea#stepcodeTextarea2901").val()));
// window.frames["iframe2901"].document.close();
// $(window.frames["iframe2901"]).load(function(){
// $("#iframe2901").height($("#iframe2901").contents().find("body").height()+showittryitheight);
// });
// code2901 = newCode;
// }
});
$(".tryButton2901").click(function(){
$("#tryDiv2901").show();
$("#stepcodeTextarea2901").focus();
$("#stepcodeTextarea2901").height(200);
$("#iframe2901").height(0);
window.frames["iframe2901"].document.write("
");
window.frames["iframe2901"].document.write(decodeHtml($("textarea#stepcodeTextarea2901").val()));
window.frames["iframe2901"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2901"]).load(function(){
$("#iframe2901").height($("#iframe2901").contents().find("body").height()+showittryitheight);
});
$("#iframe2901").height($("#iframe2901").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2901.focus();
editor2901.setSize(null, "250");
$("#rendering2901").hide();
$("#rendered2901").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor2901 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2901"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor2901.on("change",function(doc){
if(!binded2901){
$(window).bind('beforeunload',function(){
binded2901 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2901 = newCode;
$("textarea#stepcodeTextarea2901").val(newCode);
if(alreadyWriteCode2901!=code2901){
lastModifedTime2901 = new Date().getTime();
$("#rendering2901").show();
$("#rendered2901").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2901 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2901.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2901").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
类似于 alert进行调试， firebug有一个日志输出工具console.log(). 不同于alert的缺点( 弹出屏幕，阻挡所有其他操作)，console.log() 只会把信息输出在console里，而不会影响用户的使用。 用户甚至意识不到console.log()的存在。
");
window.frames["iframe_show2902"].document.write(decodeHtml($("textarea#stepcodeTextarea2902").val()));
window.frames["iframe_show2902"].document.close();
$(window.frames["iframe_show2902"]).load(function(){
$("#iframe_show2902").height($("#iframe_show2902").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2902").height($("#iframe_show2902").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script>
x = 10;
console.log("x="+x);
document.write("没有用var声明的变量x的值:"+x);
console.log("end");
</script>
<script>
x = 10;
console.log("x="+x);
document.write("没有用var声明的变量x的值:"+x);
console.log("end");
</script>
");
window.frames["iframe2902"].document.write(decodeHtml(code2902));
window.frames["iframe2902"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2902"]).load(function(){
$("#iframe2902").height($("#iframe2902").contents().find("body").height()+showittryitheight);
});
$("#iframe2902").height($("#iframe2902").contents().find("body").height()+showittryitheight);
alreadyWriteCode2902 = code2902;
$("#rendering2902").hide();
$("#rendered2902").show();
}
var tRereshRetry2DemoPanel2902 = setInterval(rereshRetry2DemoPanel2902,1000);
var binded2902 = false;
$("textarea#stepcodeTextarea2902").keyup(function(){
if(!binded2902){
$(window).bind('beforeunload',function(){
binded2902 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2902 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2902!=newCode){
// window.frames["iframe2902"].document.write("
");
// window.frames["iframe2902"].document.write(decodeHtml($("textarea#stepcodeTextarea2902").val()));
// window.frames["iframe2902"].document.close();
// $(window.frames["iframe2902"]).load(function(){
// $("#iframe2902").height($("#iframe2902").contents().find("body").height()+showittryitheight);
// });
// code2902 = newCode;
// }
});
$(".tryButton2902").click(function(){
$("#tryDiv2902").show();
$("#stepcodeTextarea2902").focus();
$("#stepcodeTextarea2902").height(200);
$("#iframe2902").height(0);
window.frames["iframe2902"].document.write("
");
window.frames["iframe2902"].document.write(decodeHtml($("textarea#stepcodeTextarea2902").val()));
window.frames["iframe2902"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2902"]).load(function(){
$("#iframe2902").height($("#iframe2902").contents().find("body").height()+showittryitheight);
});
$("#iframe2902").height($("#iframe2902").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2902.focus();
editor2902.setSize(null, "250");
$("#rendering2902").hide();
$("#rendered2902").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor2902 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2902"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor2902.on("change",function(doc){
if(!binded2902){
$(window).bind('beforeunload',function(){
binded2902 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2902 = newCode;
$("textarea#stepcodeTextarea2902").val(newCode);
if(alreadyWriteCode2902!=code2902){
lastModifedTime2902 = new Date().getTime();
$("#rendering2902").show();
$("#rendered2902").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2902 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2902.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2902").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
