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

    Question : 难道不是所有web页面原先都放在服务器上吗? 甚至存储在.html文件中的HTML页面? Answer : 没错, 网站的所有文件都存储在服务器上, html, css, php ...

  2. 用FireFox火狐浏览器的3D Tilt 插件查看网页3D视图效果

    逛博客发现了网页的3D视图效果,一搜原来是Firefox特有的一个功能,先看效果: 相当炫酷,接下来介绍如何实现. 1.首先安装3d tilt 插件: 从火狐浏览器的添加插件页面,搜索:3D Tilt ...

  3. 初学js/jquery 心得

    1.多个对象操作的时候可以放在一起,eg: $('.send_message, .friends_increment').blur(function() {}); 2.三元表达式与if else,eg ...

  4. JOIN关联表中ON,WHERE后面跟条件的区别

    select * from td  left join (select case_id as sup_case_id , count(*) supervise_number from  td_kcdc ...

  5. 写日志 log 到文件夹

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  6. linux command

    ubuntu start network:sudo service network-manager start

  7. 数据挖掘算法(四)Apriori算法

    参考文献: 关联分析之Apriori算法

  8. Android实现帧动画,以及出场时的动画

    最近有个小需求,在数据上传的时候加一个上传的动画,然后就寻思着自己写一个帧动画 上传开始的时候调用动画,上传结束通知容器将其删除(这个方法应该不会太耗内存),然后吐槽下gif图片还是我自己一帧一帧从p ...

  9. flask+html selected 根据后台数据设定默认值

    先给代码 <script> $("#selector_political_status").val('{{ archive.political_status }}'); ...

  10. pdf预览-js版本

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...