不管我们开发什么项目,都需要使用调试。后端的调试比较简单。前端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. python 01

    注意Python 是大小写敏感的,即print 与Print 不一样 推荐编辑器 vim & sublime 如何运行 #!/usr/bin/python#Filename: hellowor ...

  2. Java开发基础

    天数 课程 01 Java基础回顾 集合 泛型 IO流 多线程 Junit Properties   HTML   JavaScript   JavaScript   BOM编程   XML基础   ...

  3. Docker部署Hadoop集群

    Docker部署Hadoop集群 2016-09-27 杜亦舒 前几天写了文章"Hadoop 集群搭建"之后,一个朋友留言说希望介绍下如何使用Docker部署,这个建议很好,Doc ...

  4. excle表格生成网页

    用Dreamweaver可以方便生成和excle表格一样的代码. 复制excle,粘贴

  5. [原创] 【2014.12.02更新网盘链接】基于EasySysprep4.1的 Windows 7 x86/x64 『视频』封装

    [原创] [2014.12.02更新网盘链接]基于EasySysprep4.1的 Windows 7 x86/x64 『视频』封装 joinlidong 发表于 2014-11-29 14:25:50 ...

  6. spring 声明式事务管理

    简单理解事务: 比如你去ATM机取5000块钱,大体有两个步骤:首先输入密码金额,银行卡扣掉5000元钱:然后ATM出5000元钱.这两个步骤必须是要么都执行要么都不执行.如果银行卡扣除了5000块但 ...

  7. python——有一种线程池叫做自己写的线程池

    这周的作业是写一个线程池,python的线程一直被称为鸡肋,所以它也没有亲生的线程池,但是竟然被我发现了野生的线程池,简直不能更幸运~~~于是,我开始啃源码,实在是虐心,在啃源码的过程中,我简略的了解 ...

  8. 使用cocos2d-x c++ Android静态库

    在用cocos2d-x做Android开发时,每次clean后都会需要再次编译coco2d-x的库,十分耗时. 这里给出一个直接使用静态库而不用每次都编译源码的方法: 1\ 首先找到一个cocos2d ...

  9. beat your own python env

    1,进入根目录,修改.bashrc,增加一个PATH目录 例如:alias cjtf='export PATH=/home/www/xxx/python_env:$PATH' 如果个人的机器的就不用a ...

  10. 即时聊天IM之四 Android客户端IM帮助类编写

    图文无关一起娱乐: 这一篇我们开始写Android端的Smack版主类,后面Android的IM功能都是通过这个帮助类实现的 引用类库: 因为我用的是IDE是Android Studio,所以我通过g ...