Chrome控制台 JS调试的一些小技巧】的更多相关文章

$ $_命令返回最近一次表达式执行的结果,功能跟按向上的方向键再回车是一样的,但它可以做为一个变量使用在你接下来的表达式中. $0~$4则代表了最近5个你选择过的DOM节点.在页面右击选择审查元素,然后在弹出来的DOM结点树上面随便点选,这些被点过的节点会被记录下来,而$0会返回最近一次点选的DOM结点,以此类推,$1返回的是上上次点选的DOM节点,最多保存了5个,如果不够5个,则返回undefined. Chrome 控制台中原生支持类jQuery的选择器,也就是说你可以用$加上熟悉的css选…
Chrome控制台 JS调试的一些小技巧 $ $_命令返回最近一次表达式执行的结果,功能跟按向上的方向键再回车是一样的,但它可以做为一个变量使用在你接下来的表达式中. $0~$4则代表了最近5个你选择过的DOM节点.在页面右击选择审查元素,然后在弹出来的DOM结点树上面随便点选,这些被点过的节点会被记录下来,而$0会返回最近一次点选的DOM结点,以此类推,$1返回的是上上次点选的DOM节点,最多保存了5个,如果不够5个,则返回undefined. Chrome 控制台中原生支持类jQuery的选…
    这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的,因为 google 也在不断完善chrome developer tool,所以 chrome 版本不同可能稍有差别. 一些快捷键也是 windows 上的,mac 下的应该大同小异. 常规的断点相关的 breakpoint/conditional-breakpoint/call-stack/watch-expressions 等就不涉及了. 1. Beautify Javascript js 文件在上线前一般…
JS.JQ相关小技巧积攒,以备不时之需. 1.js 获取时间差:时间戳相减.new Date().getTime()  获得毫秒数,除以(1000*60*60*24) 获得天数. 2.重定向操作:页面重定向:window.location.href="http://..."即可(本页页面跳转). 3.js立即执行函数,window.onload = function, $(document).ready({})区别 以及 执行时机 以及 先后顺序. 4.前台form表单的提交方式有很多…
在“笨办法学习python”中介绍了一些设计函数以及调试技巧: 参考网址:http://www.jb51.net/shouce/Pythonbbf/latest/ex36.html If 语句的规则¶ 每一个“if 语句”必须包含一个 else. 如果这个 else 永远都不应该被执行到,因为它本身没有任何意义,那你必须在 else 语句后面使用一个叫做 die 的函数,让它打印出错误信息并且死给你看,这和上一节的习题类似,这样你可以找到很多的错误. “if 语句”的嵌套不要超过 2 层,最好尽…
本文主要介绍一些JS中用到的小技巧 1. 类型强制转换   1.1 string强制转换为数字 可以用*1来转化为数字(实际上是调用.valueOf方法) 然后使用Number.isNaN来判断是否为NaN,或者使用 a !== a 来判断是否为NaN,因为 NaN !== NaN '32' * 1            // 32 'ds' * 1            // NaN null * 1            // 0 undefined * 1    // NaN 1  * {…
来源:w3cplus - 南北(@ping4god) 网址:http://www.w3cplus.com/tools/dev-tips.html 谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器.伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome变成了一个必须的工具.大多数可能熟悉关于chorme的许多特点,例如使用console和debugger在线编辑CSS.在这篇文章中,我们将分享一些很酷的技巧,让你能够更好的改进工作流程. 通过 console 面板修改页面元素…
上面的文章已经大致介绍了一下console对象具体有哪些方面以及基本的应用,下面简单介绍一下如何利用好chrome控制台这个神器好好调试javascript代码(这个才是我们真正能用到实处的地方) 1.先说一下源码定位 大家打开测试网页   看到页面右下方有一个推荐的图标吗?右击推荐图标,选择审查元素,打开谷歌控制台,如下图所示 我们现在想知道votePost方法到底在哪?跟着我这样做,在Console面板里面输入votePost然后回车 直接点击上图标红的链接,控制台将定位到Sources面板…
一.HTML download 与文件下载 如果希望在前端侧直接触发某些资源的下载,最方便快捷的方法就是使用HTML5原生的download属性,例如: <a href="large.jpg" download>下载</a> 但显然,如果纯粹利用HTML属性来实现文件的下载(而不是浏览器打开或浏览),对于动态内容,就无能为力. 例如,我们对页面进行分享的时候,希望分享图片是页面内容的实时截图,此时,这个图片就是动态的,纯HTML显然是无法满足我们的需求的,借助J…
1.如果想要js代码被XHTML和HTML解析,就可以使用如下方式 <script type="text/javascript"> //<![CDATA[ function(){ …… } //]]> </script> 2.在调试器中可以通过callStack看到函数执行的过程. 3.控制台比较有用的函数 console.log():输出日志 console.trace():堆栈函数,可以查看指定函数的调用关系 clear():清除控制台中的log…
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max-width: 100%; vertical-align: middle; } button, input, select, textarea { color: inherit; font: inherit; } input[type="checkbox"], input[type=&quo…
不要使用System.out.println作为调试工具 启用所有组件的详细的日志记录级别 使用一个日志分析器来阅读日志 1.条件断点 想象一下我们平时如何添加断点,通常的做法是双击行号的左边.在debug视图 中,BreakPoint View将所有断点都列出来,但是我们可以添加一个boolean类型的条件来决定断点是否被跳过.如果条件为真,在断点处程序将停止,否则断点被跳过, 程序继续执行. 2.异常断点 在断点view中有一个看起来像J!的按钮,我们可以使用它添加一个基于异常的断点,例如我…
长期以来,我的chrome浏览器书签总是不能自主排序,用书签管理器排序之后,不关闭chrome是好的,一旦关闭重开,又会恢复成原先的排序,实在很诧异,手动修改Bookmars文件也不行. 我们知道,如果打开chrome的选项“显示书签栏”,则所有书签是显示在chrome工具栏上的,这时候,如果你手工拖拉的方式去调整书签栏第一层的链接顺序,重开chrome的时候,这个排序是会被保存的,因此,就想到一个技巧,在你需要对非书签栏第一层的链接进行排序的时候,那就先把这个链接拖到第一层(也就是直接在书签栏…
首先,看一个非常不优雅的例子: 看到这段代码,虽然代码很短,但是一眼看上去就不想再看了,也就是没什么可读性.这段代码,没有封装,随意定义一个变量都是全局变量,这样在多人开发或者是大型开发中,极其容易造成所谓的脏读. 那么,该怎样把JS写得优雅一些呢?下面总结了几点供大家参考(如有错误,欢迎指正!): ①巧用闭包将函数变量变为局部变量,基本格式为: ;(function(){ ... })() 解释一下,最前面的分号,主要是为了防止在与别人的代码合并的时候出错,例如以下情况: var lucky=…
1. 数组中通过赋值语句来改变值 var a = 1; var msg = ["value0","value1"]; for(var i = 0;i<10;i++){ alert(msg[a = a == 1 ? 0 : 1]);// 0,1,0,1… } 能实现切换两个不同的值.  msg[a=1] 相当于 msg[1], a=1,同时执行赋值和取值 2.类型转换 一般把"123"转成number类型,都是parseInt("1…
js 数字操作: 1.1 取整: 取整有很多方法如: parseInt(a,10); Math.floor(a); a>>0; ~~a; a|0; 前面2种是经常用到的,后面3中算是比较偏的,因为其有不足之处,比如将下面代码放到 console 里测试: var num = 2150000000; console.log(num|0); console.log(parseFloat(num)) 你会发现问题; 输出的是: -2144967296 2150000000 其原因就在于js数字存储的…
1.关于泛微流程的js设计 泛微oa可以插入javascript可以diy自己想要的表单页面前端功能.如果有前端开发经验,或者熟练使用jQuery的话,这将变得非常容易!同时泛微OA内部有很多库,包括报表相关的js和excel相关的js等等. 2.导入相关的库 泛微oa的插入,不仅能插入js代码,还能引入css样式. 引入jQuery-ui的css文件:<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/th…
js事件执行顺序是js中一个老生常谈的一个话题, 聊这个话题之前我们先谈谈怎么给页面元素绑定我们需要的事件 1.给页面元素绑定事件 a)直接在元素上面加上需要绑定的事件,如 <button type="button" onclick="console.log('111')"></button> 结果如下: 此方法不建议使用,有两方面的原因, 1)此方法绑定的方法必须为一个全局的方法,而通常我们需要绑定的方法都是针对某一处特定的方法,并不具备通…
import android.content.Context; import android.widget.Toast; /** * Created by apple on 10/7/15. */ public class Message { public static void message(Context context, String message){ Toast.makeText(context, message, Toast.LENGTH_LONG).show(); } } 在程序…
1.不带缓存的刷新,用于刷新css或者js:Ctrl+F5 待续...…
感谢原文作者:nayi_224 原文链接:https://blog.csdn.net/nayi_224/article/details/80437329 对于需要返回boolean类型数值的地方,比如if判断,逻辑运算符,js对象会默认转换为boolean类型数据.null,undefined,0,''返回false,其他返回true. 同时,对于||与&&又有这样的特性: var a = b || c; b默认值 c默认值 a取值 true true b true false b fal…
之前自己一直使用~~运算符来把‘112222’字符型的数值换算成整型的数值 但今天调试程序发现了一些问题 ~~'999'=>999 ~~'111111999'=>111111999 这些都是正常的 但 ~~'1111119998888000'=>-925489088 就不正常了 所以大数值的换算还是使用‘+’运算符吧 +'1111119998888000'=>1111119998888000…
1.获取指定范围内的随机数 function getRadomNum(min,max){ return Math.floor(Math.random() * (max - min + 1)) + min; } 2.随机获取数组中的元素 function getRadomFromArr(arr){ return arr[Math.floor(Math.random()*arr.length)]; } 3.生成从0到指定值的数字数组 function getArray(len) { var arr…
介绍两种方法,一是ES6的flat,简单粗暴.二是递归,也不麻烦. flat ES6自带了flat方法,用于使一个嵌套的数组扁平化,默认展开一个嵌套层.flat方法接收一个数字类型参数,参数值即嵌套层的深度,默认为1.(注意是“嵌套层”不是“层”,如传入0则不展开任何嵌套)    需要注意的是:第一,flat方法一旦使用,必将移除掉数组的empty空项:第二,flat方法返回一个新数组,并不会改变原数组.    由于我们不好确定最大嵌套层的深度,因此有个很暴力的方法,直接传入Infinity,可…
来源:https://www.w3cplus.com/javascript/javascript-tips.html 1.使用...运算符合并对象或数组中的对象 同样使用ES的...运算符可以替代人工操作,合并对象或者合并数组中的对象. // 合并对象 const obj1 = { name: '大漠', url: 'w3cplus.com' } const obj2 = { name: 'airen', age: 30 } const mergingObj = {...obj1, ...obj…
前几天给大家分享了关于Scrapy爬虫项目运行和调试的小技巧上篇,没来得及上车的小伙伴可以戳超链接看一下.今天小编继续沿着上篇的思路往下延伸,给大家分享更为实用的Scrapy项目调试技巧. 三.设置网站robots.txt规则为False 一般的,我们在运用Scrapy框架抓取数据之前,需要提前到settings.py文件中,将“ROBOTSTXT_OBEY = True”改为ROBOTSTXT_OBEY = False. 在未改动之后settings.py文件中默认爬虫是遵守网站的robots…
扫除运行Scrapy爬虫程序的bug之后,现在便可以开始进行编写爬虫逻辑了.在正式开始爬虫编写之前,在这里介绍四种小技巧,可以方便我们操纵和调试爬虫. 一.建立main.py文件,直接在Pycharm下进行调试 很多时候我们在使用Scrapy爬虫框架的时候,如果想运行Scrapy爬虫项目的话,一般都会想着去命令行中直接执行命令“scrapy crawl crawler_name”,其中crawler_name指的是爬虫的名字,在一开始创建Scrapy爬虫模板的时候就指定了的,而且在该爬虫项目中具…
最近在使用console.log()方法的时候遇到一个奇怪的问题,打开chrome控制台想调试代码,结果控制台半天无反应,让我纳闷了半天.详情如图所示: 然后我又打开了新的标签页,不行!接着干脆关闭浏览器,再重新打开,结果还是一样!!!这就更加让人纳闷了!!!然后又上网查了一下,有说是控制台的设置的问题,我赶紧查看了一下,如下所示: 上面的信息.警告.错误信息等选项都是被选中的状态,很显然不是这个原因导致的!!!那么到底是什么原因导致了我的控制台无法打印日志呢? 难道console.log方法被…
天啦噜!原来Chrome自带的开发者工具还能这么用! (提升JS调试能力的10个技巧)   Chrome自带开发者工具.它的功能十分丰富,包括元素.网络.安全等等.今天我们主要介绍JavaScript控制台部分的功能. 我最早写代码的时候,也就是在JS控制台里输出一些服务器返回的内容,或者一些变量的值.但是后来通过一些深入的学习和了解,我发现Chrome的JS控制台原来还有这么多神奇的功能. 在这里我总结了一些特别有用的功能.要是你凑巧在Chrome里浏览这篇文章的话,现在就打开开发者工具,跟着…
对于大多数开发人员来说,chrome控制台最常用的命令就是 console.log()了,然后还有一些其他类似的命令,如: console.info()   提示信息 console.error()   错误信息 console.warn()   警示信息 然而,这些命令可能很多人都知道,然而,console.log()支持的多个参数中,可以设置出入样式,如: console.log("%chello world","font-size:18px;color:red;&quo…