使用Devtools[Firebug]对JavaScript进行

引言：之前我就知道可以用Firebug等浏览器的调试工具对网站传过来的html代码进行调试了，我也早就知道可以通过修改前端的方式来绕过JavaScript对输入的检查了，奈何之前完全没有用过类似的工具，因此并不是太懂用。而最近，正好遇到了一个问题，让我很感兴趣，想要亲自尝试一下前端js的绕过，接下来让我们看看这个实例~

最近我们需要在学校的综合教务系统提交社会实践的论文，但是，这个提交框有点问题：

Paste_Image.png

看图可以发现，选择课程的下拉框居然没有选项，因此在选择文件之后，点击提交，会弹框提示请选择你要提交的课程。

Paste_Image.png

当时的第一感觉就是，这是一个通过前端js实现的一个检查，早知道可以用Firebug来进行修改调试了，今天正好可以来试试~~

Paste_Image.png Paste_Image.png

首先鼠标对准下拉框，右键，选择查看元素，找到了是一个<select>标签，双击<select></select>标签的中间，输入文字，发现可以改页面，于是想自己造两个选项，百度一下<select>标签

Paste_Image.png Paste_Image.png Paste_Image.png

然后在标签中间输入<option>标签，但是发现并不能增加选项，而是把<option>标签也打印出来了，几番尝试之后，终于发现，要修改前端的内容，应该要在对应的标签上右键，点击编辑HTML，这样才能实现真正的代码修改，如下图：

Paste_Image.png Paste_Image.png Paste_Image.png

修改好了之后，选择相应的课程和文件，就可以上传了，不过实际上我们学校的开发人员已经做了这个漏洞的修复，在服务器端进行了验证，所以最后还是会反馈给你上传失败。

接下来，还想说一点调试的小技巧，F12打开控制台：

• 切换调试器的位置
  在firebug第一排工具栏的右边有几个小按钮，可以让 firebug停靠在右边，停靠在下边，或者以单独窗口打开，有时候单独窗口浏览代码的效率会更高。

无标题.png

• 查看所有js脚本的列表
  切换到调试器选项，在左边的列表中会显示所有的js文件，有些可能在刚加载的时候没有，需要执行相应的操作，才会从服务器反馈过来。

Paste_Image.png

• 查看js里面表达式计算的值
  只要将相应的表达式，复制到控制台里面，回车就会反馈出计算后的值。下面的就是图表示的就是之前提交论文的js代码：

Paste_Image.png

• 设置断点
  只要在相应的代码出点击就可以设置断点

Paste_Image.png