不管我们开发什么项目,都需要使用调试。后端的调试比较简单。前端js调试稍微复杂了一点,但是也别怕,因为我们有很多调试前端js代码的浏览器工具。比如IE浏览器、firefox浏览器、chrome浏览器等。用哪个浏览器进行调试看个人习惯。小编习惯用IE浏览器。下面小编讲讲如何使用IE浏览器调试Asp.net的 js代码。

工具/原料

  • IE浏览器、VS2012

方法/步骤

  1.  

    首先编写要实现的功能代码。如下图:前端代码(下图1)、后端代码(下图2)

  2.  

    然后运行页面。普通运行或者调试运行都进行IE浏览器调试js。界面如下图:

  3.  

    然后按F12键。调出IE浏览器的F12开发人员工具

  4.  

    然后在F12开发人员工具的左边工具栏里面选择bug臭虫那个选项,右边代码就会出现js代码。如下图:

  5.  

    然后在js代码里面在需要查看值的地方打上断点。如下图:

  6.  

    然后鼠标在点回到界面在界面文本框上输入相应值。并点击“调用后台值”的按钮。(注意:F12开发人员工具界面不能关闭)如下图:

  7.  

    点击按钮后会自动跳转至F12开发人员工具的js代码界面,鼠标光标并停留在第一个打了断点的代码那行。如下图:

  8.  

    然后按F10就一步一步往下执行代码了。把鼠标停在你要查看结果的代码上(变量)就可以查看到结果。如下图:

JavaScript WEB页面调试的更多相关文章

  1. 微信移动端web页面调试小技巧

    技术贴还是分享出来更加好,希望能对一些朋友有帮助,个人博客  http://lizhug.com/mymajor/微信移动端web页面调试小技巧

  2. mobile web页面调试方法

    此文已由作者张含会授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 开发过程问题排查 Chrome Emulation关键词:使用方便 模拟各种设备尺寸.像素比.自定义user ...

  3. 【转】手机web前端调试页面的几种方式

    前言 PC端web页面调试比较容易,这里主要说几种移动端调试的方法,从简单到复杂.从模拟调试到远程调试,大概分为几部分: 1.Chrome DevTools(谷歌浏览器)的模拟手机调试 2.weinr ...

  4. 手机web前端调试页面的几种方式

    前言 PC端web页面调试比较容易,这里主要说几种移动端调试的方法,从简单到复杂.从模拟调试到远程调试,大概分为几部分: 1.Chrome DevTools(谷歌浏览器)的模拟手机调试 2.weinr ...

  5. iOS之safari调试iOS app web页面

    Overview 当下移动端开发过程中大量使用前段H5.js等等技术,而这些web页面的调试在Xcode控制台中不太明了,经常我们移动app运行了就是方法,但是不能显示响应的效果,这时候或许就是已经报 ...

  6. safari 调试iPhone web页面

    safari设置-打开Safari偏好者设置,选中“高级菜单”,在页面最下方看到“在菜单中显示开发菜单”的复选框,在复选框内打钩,这样设置完毕就能在Safari菜单中看到开发菜单了 iPhone 设置 ...

  7. 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能

    在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能. 如果需要在移动浏览器中实现拨打电话,发送email,美国服 ...

  8. 用Chrome devTools 调试Android手机app中的web页面。

    (1) 手机要满足Android系统为4.4或更高版本,低版本不支持这种方式.(2) 确保App已经开启了webview的debug调试模式,由Android工程师协助.(2) 用usb数据线连接好手 ...

  9. 一天JavaScript示例-判定web页面的区域

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. [教程] [承風雅傳HSU]用ES4封裝Win7---ES4 Win7封裝教程(未完待續)

    [教程] [承風雅傳HSU]用ES4封裝Win7---ES4 Win7封裝教程(未完待續) a10036it 发表于 2015-7-27 21:11:19 https://www.itsk.com/t ...

  2. j.APR连接器整体框图(含SSL实现分析)

    APR连接器的思路和bio,nio的整体架构也是类似的,可以看到下面的整体框图: 第一个区别是,对于从Acceptor线程中的socket解析这块,无论是nio还是bio都是在Acceptor线程内直 ...

  3. thinkphp3.1.3中widget用法

    今天搞了tp3.1的widget,继承了widget类,但是老是掉用错误,所以换种写法,直接继承action TestAction.class.php $this->display();//调用 ...

  4. android APK更新

    菜鸟的博客请多多指教 最近做了一个新功能,更新APK的功能 1.更新APK是一个耗时的任务,我采用了一个服务来做,上次在网上看到服务是在主线程里面,自己也测试了下,数据是真的 所以下载动作还必须在服务 ...

  5. cookie封装

    //设置cookie function setCookie(name,value,days){     //如果不设置天数 , 默认为30天     days=days?days:30;     va ...

  6. (01-02) odoo8.0_Ubuntu14.04_nginx反代理设置

    作者:陈伟明联系 :  QQ 942923305 | 微信 toby942923305E-mail: cwm.win@hotmail.com============================== ...

  7. WINDOWS7(vs2012+wdk7.6) 配置驱动开发环境

    合肥程序员群:49313181.    合肥实名程序员群:128131462 (不愿透露姓名和信息者勿加入) Q  Q:408365330     E-Mail:egojit@qq.com 1.新建C ...

  8. C plus plus study note (one)

    What is an object ? Object = Entity ; Object may be -- visible or -- invisible Object is variable in ...

  9. 为什么大家都用i标签<i></i>用作小图标?

    用 <i> 元素做图标在语义上是不正确的(虽然看起来像 icon 的缩写): <i> 比 <span> 短,但 gzip 后差异很小,不过打字可以少按三个键: 多数 ...

  10. Python函数式编程学习笔记

    High order function map(f,Iterable),将f依次作用在Iterable的每个元素然后返回一个Iterator,再用list(map(f,Iterable))进行转换得到 ...