Elements chrome devtools 中 Elements panel 是审查 dom 元素和 css 的, 可以实时修改 dom/css. windows: ctrl + shift + i mac: cmd + opt + i DOM 修改 html & 属性 节点右键, 如下图, 可以: 添加属性(enter) 修改 html(F2) 删除元素(delete) 除了右键, 还可以: h toggle 元素的 visibility 属性 拖拽节点, 调整顺序 拖拽节点到编辑器 c…

一.打开的快捷键 windows: ctrl + shift + i/F12 1.Elements 1.选中 元素 切换至 Event… Tab可以查看这个元素绑定的事件 2.在 Element 选项卡中可以修改html 2.断点 在 Sources 面板 js 文件行号处设置断点, 这里除了常规断点外, 还有个条件断点(右键 conditional breakpoint), 在设置的条件为 true 时才会断点, 在循环中需要断点时比较有用 在调用堆栈这里可以切换到堆栈中的任何地方重新执行(右…

参考:Google Chrome调试js代码-http://www.open-open.com/lib/view/open1384785324165.html 重点:左下角一个{}括号图标按钮用于把杂乱的代码重新格式化为漂亮的代码,比如一些已被压缩的 js 文件基本没法看.更没法调试.点一下格式化,再点一下就取消格式化. 查看元素上绑定了哪些事件 默认会列出 All Nodes, 这些包括代理绑定在该节点的父/祖父节点上的事件, 因为在在冒泡或捕获阶段会经过该节点 Selected Node O…

原文地址:http://www.cnblogs.com/MuYunyun/p/5678405.html#3471461 阅读目录 Chrome调试工具介绍: 快速切换文件 在源代码中搜索 在源代码中快速跳转到指定的行 使用多个插入符进行选择 设备模式 格式化凌乱的js源码 颜色选择器 改变颜色格式 强制改变元素状态(方便查看不同状态下元素的样式) 利用chrome来查看和编辑本地文件 选择下一个匹配项 可视化的DOM阴影 奇淫技 Chrome Dev开发者选项 总结 几个月前转用Chrome后,…

前面的话   对于chrome调试工具,常用的是elements标签.console标签.sources标签和network标签.但实际上,还有一些不太常见但相当实用的方法可以提高网页调试效率.本文将详细介绍那些不常见的chrome调试工具使用方法 刷新   一般地,人们对于刷新的印象只是停留在使用F5快捷键上.但实际上,刷新包括三种.在开发者调试工具打开的情况下,长按刷新按钮,会出现这三种刷新选项 搜索   在elements标签下使用ctrl+f搜索功能,可以使用css选择器,如'.test…

一.前言 本文记录的是作者在工作上面对chrome的一些使用和情况的分析分享,内容仅代表个人的观点.转发请注明出处(http://www.cnblogs.com/st-leslie/),谢谢合作 二.浏览器模块介绍 由于chrome浏览器一直在不断的进行更新迭代,会不断的新增功能,有一些老的功能会被摒弃掉,所以我们介绍这个功能的时候是以这个系列文章发布时候的最新版为主(2018-01-05 ) 1. 用来选择所需要的HTML元素,通过HTML元素定位到Elements中的对应代码 2. 用来在手…

Fiddler抓取https请求 & Fiddler抓包工具常用功能详解   先来看一个小故事: 小T在测试APP时,打开某个页面展示异常,于是就跑到客户端开发小A那里说:“你这个页面做的有问题,页面展示异常”:小A说:“这哪是我的问题,你去找后台吧,后台接口返回数据有问题”:小T就屁颠屁颠的跑到后台接口开发小M那里说:“你接口返回数据有问题,改下吧”:小M看了看服务器日志说:“没找到报错啊,我这里服务正常,你抓个包看下吧”:小T郁闷了,屁颠屁颠的回去了想:“抓包?抓啥包?”: 以上故事,在实在…

本文链接:https://blog.csdn.net/u012542647/article/details/79401485 今天要给大家介绍一个神器,就是谷歌浏览器(Chorme)自带的前端调试工具——Developer Tools. 在谷歌浏览器中,通过快键键F12就可以打开Devloper Tools: Developer Tools Develop Tools功能比较多,本文主要讲解比较常用的几个面板:Elements.Console.Sources和Network. ——    1  …

概述 Webpack是一款用户打包前端模块的工具.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑.打包其他的静态资源,包括css.image.font file.template等.个人认为它的优点就是易用,而且常用功能基本都有,另外可以通过自己开发loader和plugin来满足自己的需求.这里就尽量详细的来介绍下一些基本功能的使用. 安装 npm install webpack 运行webpack webpack需要编写一个config文件,然后根据这个文件来执行需…

作为前端开发者都知道,快捷键F12可以打开chrome调试工具.firefox可以打开firebug工具.“工欲善其事,必先利其器”,对调试工具的掌握,能大大提高我们调试代码的效率.因为我平常chrome用的多,这里就大概介绍下chrome调试工具在windows下的使用,firefox的话就暂时不做介绍. 快捷键 ctrl+o 在Sources面板中打开一个文件(JS,CSS)ctrl+p 同ctrl+octrl+f  查找当前文件中的关键字ctrl+shift+f 全局查找关键字ctrl+s…

随着浏览器的升级,CSS3已经可以投入实际应用了. 但是,不同的浏览器有不同的CSS3实现,兼容性是一个大问题.上周的YDN介绍了CSS3 Please网站,该网站总结了一些常用功能的写法. 以下就是这些写法的详细介绍.所有代码都经过了Firefox 3.6和IE 8.0的验证,原文的错误之处也已得到改正. 一.圆角(Rounded Corner) .box_round { -moz-border-radius: 30px; /* FF1+ */ -webkit-border-radius: 3…

上一篇文章我们说了chrome调试工具的一些比较基础功能的用法,接下来我们要在这一篇文章中说一说,其他一些chrome调试工具的使用方法 2.1.5 Network模块 在netWork模块中,大致上可以分成四块模块, 1- 这个模块相当于是一个功能菜单,左边的四个按钮依次表示的是: 1-1 停止捕获请求 1-2 清除所有的请求 1-3 对请求进行快照 1-4 是否开启过滤选项,也就是是否开启图中的2 除此之外里面的Disable Cache是用来请求请求缓存,Preserve log 用来保存…

三.chrome调试工具实战 3.1 获取界面对应的HTML和修改样式 我们以博客园为例子来分析. 通过上面的操作就可以定位到对应的HTML代码 左侧菜单显示的就是当前指定元素层叠样式的一个情况 上面的图片中的内容是可以随意添加的,但是如果是只操作于一个元素,那么我们直接在最顶层上面添加样式就好. :hov 按钮可以模拟hofv的操作 :cls 可以给元素添加class 下面我们来演示模拟标题的一个hover事件 3.2 快速定位对应元素上面的事件 还是以上面的同一个标题为例: 我们把右侧菜单切…

3.3 给页面添加测试脚本 在现实的工作中,我们往往会遇到一些问题在线上就会触发然后本地就触发不了的问题.或者是,要给某个元素写一个测试脚本.这个时候如果是浏览器有提供一个添加脚本的功能的话,那么我们的整个操作就方便多了.具体操作如下: 我们先来给自己定一个需求,我们要在博客园的tab面板上面添加一个弹窗,弹窗的内容为1 这个时候的操作如下:首先先把面板切换到Sources,然后再右侧中选中Snippets,接着点击New snippet来,添加的脚本如下: $(".post_nav_block…

很多人喜欢使用键盘快捷键来操作电脑,因为在熟练的情况下,使用键盘会比使用鼠标点击更快.更高效.本文对Chrome浏览器常用的快捷键做个说明. 标签页和窗口快捷键 1.  Ctrl + n 打开新窗口 2.  Ctrl + t 打开新的标签页,并跳转到该标签页 3.  Ctrl + Shift + t 重新打开最后关闭的标签页,并跳转到该标签页 4.  Ctrl + Tab 跳转到下一个打开的标签页 5.  Ctrl + Shift + Tab 跳转到上一个打开的标签页 6.  Alt + ← …

CSS3常用功能的写法 作者: 阮一峰   随着浏览器的升级,CSS3已经可以投入实际应用了. 但是,不同的浏览器有不同的CSS3实现,兼容性是一个大问题.上周的YDN介绍了CSS3 Please网站,该网站总结了一些常用功能的写法. 以下就是这些写法的详细介绍.所有代码都经过了Firefox 3.6和IE 8.0的验证,原文的错误之处也已得到改正. 一.圆角(Rounded Corner) .box_round { -moz-border-radius: 30px; /* FF1+ */ -w…

Python常用功能函数汇总 1.按行写字符串到文件中 import sys, os, time, json def saveContext(filename,*name): format = '^' context = name[0] for i in name[1:]: context = context + format + str(i) context = str(context).replace('(','(').replace(')',')').replace(',',',').re…

chrome控制台常用技巧有哪些 一.总结 一句话总结:别的里面支持的快捷键,chrome里面几乎都支持,比如sublime中的ctrl+d,其实真是一通百通,都差不多的 1.chrome如何快速切换文件? Ctrl+P(cmd+p on mac) 我一般如果查找每个文件,一般都是打开控制台,在source控制面板里面一个一个去找,看下面的图你就应该知道,这么多文件,你都不知道在哪个目录下面,然后就只能一个一个点开看 后来才发现原来按Ctrl+P(cmd+p on mac),就能快速搜寻和打开你…

WebStorm 是 JetBrain 公司开发的一款 JavaScript IDE,使用非常方便,可以使编写代码过程更加流畅. 本文在这里分享一些常用功能的使用技巧,希望能帮助大家更好的使用这款强大的 JavaScript 开发工具. 文章来源:葡萄城产品技术社区 代码编辑 代码跳转: Ctrl + 左键 或者 Ctrl + B,可以跳转到函数或者变量的声明位置 调用位置: Alt + F7,查找调用者 自动补全: 最好是修改一下响应时间,Settings->Editors->General…

正则表达式在字符串处理上有着强大的功能,sun在jdk1.4加入了对它的支持 下面简单的说下它的4种常用功能: 查询: String str="abc efg ABC";  String regEx="a|f"; //表示a或f Pattern p=Pattern.compile(regEx); Matcher m=p.matcher(str); boolean rs=m.find();…

一.常用控件 文本框:输入文字或表达式 表格:设置表格的行列数,输入数字或表达式 子报表:放置子报表后,系统会自动增加一个页面,你可以在此页面上设计需要的报表.系统在打印处理时,先按主报表打印,当碰到子报表时会自动转入子报表的页面进       行打印处理,完成后继续执行主报表打印的工作,所以我们又称之为嵌套报表. 复选框:根据布尔表达式是否为ture来显示是否 √(如性别男女) 条形码:绑定扫描码(如静滴单),一般Type为Code128 交叉表:Matrix 页面设置:设置纸张大小及页边距…

一.字符串常用功能 1. capitalize(),将字符串的首字母变成大写,其余全部置为小写:如果字符串中有多个单词,也只是将第一个单词的首字母置为大写:例: >>> name = 'i am keVin ChOu' >>> ret = name.capitalize() >>> print(ret) I am kevin chou 2.casefold(),将字符串全部置为小写 >>> name = 'II am keVin Ch…

常用功能的实现 获取当前脚本所在目录 current_script_dir = fileparts(mfilename('fullpath')); % 结尾不带'/' 常用函数的说明 bsxfun matlab函数 bsxfun浅谈 bsxfun是一个matlab自版本R2007a来就提供的一个函数,作用是"applies an element-by-element binary operation to arrays a and b, with singleton expansion enab…

概述 Webpack是一款用户打包前端模块的工具.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑.打包其他的静态资源,包括css.image.font file.template等.个人认为它的优点就是易用,而且常用功能基本都有,另外可以通过自己开发loader和plugin来满足自己的需求.这里就尽量详细的来介绍下一些基本功能的使用. 上一篇已经介绍如何安装了,这里就不再重复了. 运行webpack webpack需要编写一个config文件,然后根据这个文件来执行需…

小编吐血整理加上翻译,太辛苦了~求赞! 本文主要总结了JavaScript 常用功能总结,如一些常用的JS 对象,基本数据结构,功能函数等,还有一些常用的设计模式. 目录: 众所周知,JavaScript是动态的面向对象的编程语言,能够实现以下效果: 1. 丰富Web 网页功能 2. 丰富Web界面 3. 实现本地或远程存储. 4. 实现分布式网络应用的前端组件,并在后台进行数据存储管理. 5. 使用JavaScript可以实现完整的分布式Web 应用. JavaScript 中的数据类型 Ja…

VS: 1: Ctrl + Enter (在光标指定位置的上面添加一行,并将光标移至新添加行的行首位置) Ctrl + Shift + Enter (在光标指定位置的下面添加一行,并将光标移至新添加行的行首位置) 2: Ctrl + Shift + L (删除当前行) 3: Ctrl + M + O (折叠所有的函数) Ctrl + M + P (展开所有的函数 5: Tab (增加缩进) Shift + Tab (减少缩进) 6: Ctrl + E + S (查看空白 -- 将空格转换为绿色的…

TeeChart控件的安装 TeeChart 7.0 With Source在Delphi 7.0中的安装 一.删除Delphi7自带TeeChart  1.Component -> install Packages 中 Remove 所有以Tee开头的包,OK,关闭Delphi7. 2.删除Delphi\Bin目录下的DclTee70.bpl;  3.删除 \Windows\System32(或System)目录的以下文件:  Tee70.bpl  Teedb70.bpl  Teeqr70.b…

代码难免会有Bug,每次我们在Chrome调试代码时,总是会进入各种各样的库代码(比如jQuery.Zepto),但实际上很多时候我们并不希望这样,要是能把这些库代码“拉黑”多好啊. 广大码农喜闻乐见的事情,隔壁家火狐已经实现了的功能,而且也有人给Chromium提了Issue-407024.自然Chrome最终也提供了这个功能–Blackbox.Blackbox允许屏蔽指定的JS文件,这样调试的时候就会绕过它们了. 屏蔽文件后会怎么样 库代码(被屏蔽的文件)里抛出异常时不会暂停(当设置为Pau…

Ⅰ.概述 上一篇文章是总结关于Keil使用方法-常用功能(一),关于(文件和编译)工具栏每一个按钮的功能描述和快捷键的使用. 我将每一篇Keil使用方法的文章都汇总在一起,回顾前面的总结请点击下面的链接(微信点击阅读原文),Keil使用方法(汇总): http://blog.csdn.net/ybhuangfugui/article/details/51647893 今天总结关于工程目标(配置)选项的常用功能,不会总结每一个功能,计划在今后的文章中会整理出详细的文档说明. 本着免费分享的原则,方…

Ⅰ.概述 学习一门软件的开发,开发工具的掌握可以说尤为重要.由于Keil集成开发工具支持多种MCU平台的开发,是市面上比较常见的,也是功能比较强大一款IDE.所以,对于大多数人说,选择Keil几乎是单片机或者嵌入式开发人员的不二选择. 从今天开始的接下来一些时间总结关于Keil的使用方法.计划前一阶段总结常见功能,后面综合性的总结Keil的功能. 关注我的朋友应该知道,我前面已经总结过Keil下载与安装 和 Keil新建软件工程这两篇文章,今天接着上面的文章来总结Keil使用方法之常用功能. 使…