JavaScript WEB页面调试
不管我们开发什么项目,都需要使用调试。后端的调试比较简单。前端js调试稍微复杂了一点,但是也别怕,因为我们有很多调试前端js代码的浏览器工具。比如IE浏览器、firefox浏览器、chrome浏览器等。用哪个浏览器进行调试看个人习惯。小编习惯用IE浏览器。下面小编讲讲如何使用IE浏览器调试Asp.net的 js代码。
工具/原料
- IE浏览器、VS2012
方法/步骤
首先编写要实现的功能代码。如下图:前端代码(下图1)、后端代码(下图2)


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

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

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

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

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

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

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

JavaScript WEB页面调试的更多相关文章
- 微信移动端web页面调试小技巧
技术贴还是分享出来更加好,希望能对一些朋友有帮助,个人博客 http://lizhug.com/mymajor/微信移动端web页面调试小技巧
- mobile web页面调试方法
此文已由作者张含会授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 开发过程问题排查 Chrome Emulation关键词:使用方便 模拟各种设备尺寸.像素比.自定义user ...
- 【转】手机web前端调试页面的几种方式
前言 PC端web页面调试比较容易,这里主要说几种移动端调试的方法,从简单到复杂.从模拟调试到远程调试,大概分为几部分: 1.Chrome DevTools(谷歌浏览器)的模拟手机调试 2.weinr ...
- 手机web前端调试页面的几种方式
前言 PC端web页面调试比较容易,这里主要说几种移动端调试的方法,从简单到复杂.从模拟调试到远程调试,大概分为几部分: 1.Chrome DevTools(谷歌浏览器)的模拟手机调试 2.weinr ...
- iOS之safari调试iOS app web页面
Overview 当下移动端开发过程中大量使用前段H5.js等等技术,而这些web页面的调试在Xcode控制台中不太明了,经常我们移动app运行了就是方法,但是不能显示响应的效果,这时候或许就是已经报 ...
- safari 调试iPhone web页面
safari设置-打开Safari偏好者设置,选中“高级菜单”,在页面最下方看到“在菜单中显示开发菜单”的复选框,在复选框内打钩,这样设置完毕就能在Safari菜单中看到开发菜单了 iPhone 设置 ...
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能. 如果需要在移动浏览器中实现拨打电话,发送email,美国服 ...
- 用Chrome devTools 调试Android手机app中的web页面。
(1) 手机要满足Android系统为4.4或更高版本,低版本不支持这种方式.(2) 确保App已经开启了webview的debug调试模式,由Android工程师协助.(2) 用usb数据线连接好手 ...
- 一天JavaScript示例-判定web页面的区域
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- ubuntu apt-get 时 Unable to fetch some archives, maybe run apt-get update or try with --fix-missing?
sudo cp /etc/apt/sources.list ~/ sudo wget "http://pastebin.com/raw.php?i=uzhrtg5M" -O /et ...
- 【LeetCode】#1 Two Sum
[Question] Given an array of integers, return indices of the two numbers such that they add up to a ...
- python——创建django项目全攻略(野生程序员到家养程序员的完美进化)
新建工程 我用pycharm写代码,所以一般就用pycharm创建django工程.右上角File-New Project.选择路径,修改项目名称,确定.就可以创建一个新的django工程. ...
- VC++使用Pro*CC++
几种数据库访问技术的比较 由上所述, Visual C++ 通过以上方法都可以访问Oracle 数据 库, 但是上述方法各有优缺点.ODBC 出现得比较早, 几乎支持所 有的关系型数据库, 而且有MF ...
- zencart産品描述加上錨文本
首先,函數會遍曆整段描述,假如一段描述裏面有Hermes wallets這個關鍵詞,那麽函數就會對這個關鍵詞加上鏈接,至于鏈接到哪裏,上面數組裏面有,隻要把數組裏面的内容替換你想要的就可以. 那麽在z ...
- 代码成长记录之jquery this使用
后台管理的一个项目,第一次主动尝试自己动手写交互,果然问题来了,之前想当然觉得自己能写,不动笔,真的是对自己不负责任啊! 效果图是这样的,按我的思维写下来是点击一个‘更改’ 多个地方会同时触发下拉 ...
- JS 跳转页面 在新的选项卡打开
function going(url) { var a = $("<a href='" + url + "' target='_blank'>Apple< ...
- ubuntu - 中文
首先要从Ubuntu语言设置那里,把中文语言包安装上 打开/etc/environment 在下面添加如下两行 LANG="zh_CN.UTF-8″ LANGUAGE="zh_CN ...
- PHP正则表达式替换站点关键字链接后空白的问题解决
标题这样不知道合适不合适.具体的情况是这样的:网站要增加关键字链接功能,然后需要对文章的内容进行正则表达式匹配并替换,然后使用了preg_replace函数.替换的程序代码如下: function R ...
- Struts2 Action下面的Method调用方法
1. 在struts.xml中加入<constant name="struts.enable.DynamicMethodInvocation" value="tru ...