Web开发标配--开发人员工具-JS调试

喜欢从业的专注,七分学习的态度。

JS:全称JavaScript,Web中,js主要在两个地方:

  • html的<script type="text/javascript"></script> 中.
  • js脚本文件中,页面引用js:<script src="js/***.js"></script>
    JS调试一般在浏览器开发人员工具“调试程序”Tab页。

F12打开浏览器 开发人员工具。

开发人员工具

主要关注点在左侧代码框和右侧监控区域。

关键点: 断点、监控、调试工具。

调试程序简单总结就是断点+监控+调试工具。

断点

调试程序首先在运行前先添加断点,让程序在断点处停止,然后才有监控和调试。
添加断点:行号左侧单击,添加断点后出现断点标志,程序运行到断点处会停止 。

断点

监控

当程序停止在程序调试界面后可以添加需要监控的对象,可以监控的的内容包括对象和公式。
添加监控:选择对象或公式,右键,添加监控。

  • 对象监控
    选择对象---右键---添加监控,右侧得到对象的值。

    对象监控

  • 公式监控

选择公式--右键---添加监控,右侧得到对象的值。

公式监控

调试工具

当程序在断点处停顿后可以使用调试工具,一步步观察程序走向。

调试工具

使用“单步调试”工具一行一行执行,观察程序运行步骤,在遇到调用方法时使用“进入调试”进入调用的方法内部观察运行步骤,在调用层次很深时,使用“跳出”回到方法外层,使用“运行”走完调试。

代码搜索

在调试界面有一个输入框,用于检索当前代码内容,进行内容定位,可回车直接定位。

代码检索

开发工具对于每个人都有一些自己的使用习惯,最适合的、最习惯的、自己摸索的、是最好的。

一步一步,坚持积累,坚持学习。

时间: 2024-10-25 06:33:10

Web开发标配--开发人员工具-JS调试的相关文章

Web开发标配--开发人员工具-F12

喜欢从业的专注,七分学习的态度. 360浏览器-开发工具 谷歌-开发工具 IE-开发工具 Web开发中最最烦琐的莫过于调整CSS和JS,而最方便最高效的方式就是利用浏览器的开发工具调整.CSS可以实时调整展现,JS可以断点.监控.那么这个最最方便的工具怎么打开,统一按下键盘F12. 不同浏览器不同版本对应开发工具也不一样,但基本原理都一致.最常用的有这些功能:移动设备.Elements.Source.Network. 常用 移动设备 移动设备是指将Web页面从PC展示切换到手机模式,用于模拟手机

常用JS调试工具使用方法,帮你快速定位问题(Firebug+ IE“开发人员工具”)

来源: 这里花了点时间小结了下目前项目中比较合适易于上手的JS调试工具.方法.优点与不足以及一些调试相关功能要点或策略,分享给同学们,只当抛砖引玉了,欢迎大家讨论补充. 一.Firebug:如果项目可以支持Firefox,我依然首推Firebug作为JS调试首选,虽然有些不足之处,但基本可以满足大家90%调试场景需求. A. 功能讲解 见上图,图中已标注出功能的五个关键点,下面顺序说明,先将Firebug切换到标注1中的JS调试功能Tab“脚本”上:打开标注2中的当前页面加载的所有静态JS链接资

BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第3章节--SharePoint 2013 开发人员工具 SharePoint中基于Web开发

BEGINNING SHAREPOINT? 2013 DEVELOPMENT 第3章节--SharePoint 2013 开发人员工具 SharePoint中基于Web开发 之前提到过,定义SharePoint开发有多种方法.作为高级用户,你可能使用更多原生SharePoint功能在基于Web环境做开发.高级用户典型地在SharePoint站点有逐步上升的权限,并且能够完成以下任务: 创建和管理网站集与网站权限. 配置站点主题. 添加Apps到站点. 为网站中使用创建并部署多媒体. 配置和自定义

一探前端开发中的JS调试技巧

前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要. 本文将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一起来温习,也许有你没见过的方法,不妨一起来学习,也许你尚不知如何调试,赶紧趁此机会填补空白. 骨灰级调试大师Alert 那还是互联网刚刚起步的时代,网页前

前端开发中的JS调试技巧

前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要. 本文将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一起来温习,也许有你没见过的方法,不妨一起来学习,也许你尚不知如何调试,赶紧趁此机会填补空白. 骨灰级调试大师Alert 那还是互联网刚刚起步的时代,网页前

主流浏览器开发人员工具(F12)在安全测试中的优与劣

<!--本文所指主流浏览器为Chrome.Firefox.IE--> <!-- 0x01 场景假设 0x02 Chrome 0x03 Firefox 0x04 IE 0x05 结论 --> 0x01 场景假设 三款浏览器开发人员工具的使用及页面调试等技能,本文不做描述,只说在安全测试中遇到情况. 考虑如下场景:现在要对一个Web应用做安全测试,客户端/服务端使用HTTPS双向认证,客户端使用U盾一类的工具. 根据上述场景:缺少证书的任意一环,通信无法发生:客户端私钥写在硬件中,无法

【转载】一探前端开发中的JS调试技巧

友情提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读 前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要. 本文将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一起来温习,也许有你没见过的方法,不妨一起来学习,也许你尚不知如何调试,赶紧趁此机会

chrome开发人员工具使用链接整理

Google_Chrome 开发人员工具详解:http://wenku.baidu.com/link?url=v-bAUCddu3t9I14LQVQtRhNDoohge2lsTLl3QDjiMoLQl4CJ629xfqnL_woYyDsWLWDkUyEmllRwY-oUEtwDN-ZlTTSjOdvpKaxwUoJmp6y Google Chrome 调试JS简单教程:http://www.360doc.com/content/13/1220/11/8790037_338626990.shtml

IE开发人员工具之实用功能讲解

F12快捷键调出开发人员工具 一.JS的内容格式化 1.内容较乱的js脚本: 2.勾选下面两项即可进行格式化脚本:自动换行与格式化JS 3.调理清楚的脚本 二:清空控制台 1.右键->清空 2.console.clear() 三:用控制台代替alert() 当你需要调试代码中的值却又不想中断代码的执行时,我们可以用: window.console.log("HelloWorld"); 在控制台查看. 四:调试JS时的断点快捷键 F9:添加/移除 断点 F10:逐过程,即跳过该语句