“面试一个前端工程师的时候，我一般给他一个bug，然后看他怎么打断点的，一个人的能力在调试过程中一览无遗。” ----某人说的
当我们在自己编写自己的项目的时候，出现bug，由于这个项目代码是自己写的，对里面的逻辑已经很清楚的情况下，都会采用这样的输出语句去验证自己的代码的正确性。
System.out.println("hihi"); //java
alert("hihi"); // 前台js
一般都会 将这样的代码加在 代码前后，根据控制台有没输出“hihi’
或者弹框 来验证代码正确性，但这样的
方法真的很 low,而且不好用
第二，当我们面对的代码是别人写的大项目，怎样去最快的熟悉别人的代码，通过打断点跟踪代码是最清晰有效的。
Debug的作用
找出程序运行的异常
找出程序运行结果不正确的原因
理清一个复杂程序的流程，帮助阅读代码
概念
首先，这篇文章的标题是在Debug的路上迈出第一步，那么，
什么是bug?
bug是指程序的错误和漏洞。
什么是Debug?
指程序员对编好的程序进行漏洞排查，尽量消除错误或漏洞，一般使用专业的工具进行。(如后台采用eclipse,前台使用chorme)
什么是断点？
断点是须要打在有可能出问题的方法体中的某条语句的左侧，可以打多个断点，但是越少越好。断点可以在Debug运行之前添加，可以在运行时添加。
一个简单的登录例子
这是一个简单的登录例子，演示从前台打断点，到后台断点，能清晰的看到数据如何一步一步的跟到后台。
前台断点.gif
如上图，login()函数是点击登录按钮会调用执行的函数，我此刻在131行上打了一个断点，当输入用户登录信息后，点击登录按钮，就会来到断点的地方，我们就能清晰的看到每个变量具体的值。之后通过ajax函数去请求后台 。
可能刚接触的读者就会有这样这样的疑惑，我要怎么在浏览器上快速的找到我的代码呢？
页面上F12 打开开发工具，点击第三个 tab : Sources。
打开开发者工具
ctrl+o 可以快捷查询想要找的文件并打开
eclipse 的话是ctrl+shift+R 快捷查询 项目里面的文件并打开
ctrl+f 在页面上快捷查询某个字段
于是我们接下来 在 后台对应的地方打个断点。
后台调试.gif
同样可以在后台上面清晰看到数据的具体值。
chrome 开发者工具简直是神器如果熟练度够的话，在这里只是简单的介绍了下，做了个引子，感受了下有这个东西。
断点调试。断点可以让程序运行到某一行的时候，把程序的整个运行状态进行冻结。你可以清晰地看到到这一行的所有的作用域变量、函数参数、函数调用堆栈。你可以看到数据是怎么在程序当中流动的，你还可以修改、把玩它们。断点调试让你真正了解一个程序的运作流程。
部分代码：
<div class="login" onsubmit="return login()">
<div class="message">万盛电器的销售管理系统-登录</div>
<div id="darkbannerwrap"></div>
<form action="" id="Myform">
<!-- <input name="action" value="login" type="hidden"> -->
<input name="username" placeholder="用户名" required="" type="text"
data-easyform="length:4 16;char-chinese;real-time;"
data-message="用户名必须为4—16位的英文或数字或2-8为中文" data-easytip="position:top;"
/>
<hr class="hr15">
<input name="password" placeholder="密码" required="" type="password"
data-easyform="length:6 20;char-normal;real-time;"
data-message="密码必须为6—20位英文、数字、下划线" data-easytip="position:top;"
/>
<hr class="hr15">
<div id="drag"></div>
<hr class="hr15">
<input value="登录" style="width:100%;" type="submit" id="btn_login">
<hr class="hr20">
<font color="red"></font>
<hr class="hr20">
</form>
</div>
js代码
<script type="text/javascript">
function login()
{
var username_1=$("input[type=text]").get(0).value;
console.info(username_1);
var psd=$("input[type=password]").get(0).value;
var ckb=$("input[type=radio]:checked").val();
var isflag=$(".drag_text").text(); //前台界面滑动块文字
if(isflag=="验证通过")
{
$.ajax({
type:"post",
url:"LoginServlet.do",
async:true,
dataType:"json",
data: {username:username_1,password:psd},
success:function(data)
{
console.info(data);
if(data.code=="200")
{
if(data.user.userStatus==1)
{
alert("该用户已经被限制，请与管理员联系");
}
else
{
if(data.user.userRole==1)
{
window.location.href='index.jsp';
}
else
{
if(data.user.userRole==2)
{
window.location.href='index2.jsp';
}
else
{
if(data.user.userRole==3)
{
window.location.href='index3.jsp';
}
}
}
}
}
else
{
if(data.code=="404")
{
alert("用户账号信息有误")
}
}
}
});
}
return false;
}
</script>
后台代码：
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String username=request.getParameter("username");
String password=request.getParameter("password");
UserService Ser=new UserService();
//找到数据
List <Dbuser> lists=Ser.FindUser(username, password);
if(lists.size()>0) //好不到
{
//存储session
HttpSession session=request.getSession();
session.setAttribute("user_name", lists.get(0));
Map<String, Object> colours = new HashMap<String, Object>();
colours.put("code", "200");
colours.put("user", lists.get(0));
Gson gson = new Gson();
String json = gson.toJson(colours);
// 输出到界面
System.out.println(json);
PrintWriter out=response.getWriter();
out.print(json);
out.flush();
out.close();
}else
{
Map<String, String> colours = new HashMap<String, String>();
colours.put("code", "404");
colours.put("user", "{}");
Gson gson = new Gson();
String json = gson.toJson(colours);
// 输出到界面
System.out.println(json);
PrintWriter out=response.getWriter();
out.print(json);
out.flush();
}
}
网友评论