Google调试技巧总结
工欲善其事 工欲善其事,必先利器。
Google调试面板一一介绍:F12回想一下大家都应该知道,哈哈
element面板
这个面板显示了页面所有html代码。用于调试css代码。右側展示左側相应选择元素属性。点击属性值可进行改动查看。
调试小技巧:
1,改变字体大小或者间距时,按住alt+箭头可零点一个像素间距调整,按住shift+箭头可十个像素间距调整;
2。定位元素快捷键:ctrl+shift+c
3,edit as HTML快捷键 F2
properties用于查看属性所具有的所有属性方法
Network面板
这个面板用于查看网络响应内容。包含Ajax类请求。点击左側请求右側显示请求响应头部详细信息及cookies。
Required Headers/Response Headers请求/响应头信息。 Query String Parameters 请求參数。可实时检測每一个请求是否被正确发出、对应信息是否正确等。
Source面板
这个面板可进行js调试
选择需调试js,单击側栏加入断点。页面运行到断点处出现右側调试单步控制条,各局部、全局变量;
F8 pause/continue 暂停继续
F10 step over 单步跳过
F11 step into 单步进入
shift+F11 step out单步跳出
在watch expressions(查看变量)处,输入你想查看的变量名可方便查看变量变化
在js右键选择本地改动可调出控制台,在控制台进行属性改动调试。
单击{}可美化js
TimeLIne面板
这个面板显示系统载入页面耗时情况,方便开发人员在优化页面载入速度时进行针对性优化。
resource面板
显示该页面全部资源 包含图片、css、js,可对页面进行全面下载浏览。对于意图细致研究某页面时发挥非常大作用。
audits面板
对于前端开发人员是一大利器,可提供优化页面的建议。
点击run之后就可以显示。
console面板
除了查看错误信息、打印调试信息(console.log())、写一些測试脚本之外,还能够当做js API用。比如:依次输入var d=new Date() ->按enter -> d -> 按enter -> console.dir(d)就可以显示d的全部属性
版权声明:本文博主原创文章,博客,未经同意不得转载。
Google调试技巧总结的更多相关文章
- iOS各种调试技巧豪华套餐
转载自http://www.cnblogs.com/daiweilai/p/4421340.html 目录 前言 逼优鸡 知己知彼 百战不殆 抽刀断Bug 普通操作 全局断点(Global Break ...
- web调试技巧
接触web不久,遇到了一些"奇怪"的问题,现将一些调试技巧总结如下: 1.欲添加某一样式,点击右键,查看源码 2.样式有问题,点击右键,审查元素 当然,还有一些经验总结 ...
- Chrome - JavaScript调试技巧总结(浏览器调试JS)
Chrome 是 Google 出品的一款非常优秀的浏览器,其内置了开发者工具(Windows 系统中按下 F12 即可开启),可以让我们方便地对 JavaScript 代码进行调试. 为方便大家学习 ...
- Android开发--环境搭建和调试技巧
一:环境搭建 (1)我使用的环境是:window8+Java SDK+Eclipse+Android SDK+ADT 安装步骤:Java SDK-->Eclipse--->ADT---&g ...
- 推荐几个不错的console调试技巧
在我们的日常前端开发中,使用最频繁的莫过于使用console.log在浏览器的控制台中打印出我们需要调试的信息,但是大部分人可能跟之前的我一样,没有意识到其实console除了log方法以外,还有很多 ...
- 前台console调试技巧
前台console调试技巧 一.console.log() 二.console.warn() 三.console.dir() 四.console.table() 五.console.assert() ...
- 【转载】Python 代码调试技巧
https://www.ibm.com/developerworks/cn/linux/l-cn-pythondebugger/ Python 代码调试技巧 张 颖2012 年 5 月 03 日发布 ...
- 【工具】VS2010常用调试技巧(1)
调试是一个程序员最基本的技能,其重要性不言自明.不会调试的程序员就意味着他即使会一门语言,却不能编制出好的软件.本文就本人在开发过程中常用的调试技巧作下简单呢介绍,希望对大家有所帮助,能力超群者请绕道 ...
- Visual Studio高级调试技巧
1. 设置软件断点,运行到目标位置启动调试器 方法①:使用汇编指令(注:x64 c++不支持嵌入汇编) _asm 方法②:编译器提供的方法 __debugbreak(); 方法③:使用windows ...
随机推荐
- WPF MediaElement播放器2
在此问个问题,MediaElement播放本地和http上的视频没问题,但是ftp的怎么在本例中播放不了 若高手了解,请不吝赐教 using System; using System.Collecti ...
- centos6.5安装nodejs
Preface(前言) 一次偶然的机会知道有nodejs这个东西,确实对它还是非常感兴趣的.刚開始仅仅知道它能让javascript写后台,然后前后台都由javascript来写,确实认为真的挺爽,毕 ...
- IOSi科研OS7
具体的使用说明的适应
新近.我进行了项目iOS7适应,它有没有用7.0SDK它是由于老project采用iOS7.0存在一些问题,以这个机会,我专门整理改编iOS7需要注意的几个地方. 记录,如下面: 一,iOS7 ...
- python 调用图灵机器人api实现简单的人机交互
接入流程例如以下,须要先注冊开发人员帐号,之后会得到一个32位的key,保存下来,用于以后发送数据.http://www.tuling123.com/ 请求方式 演示样例: # -*- coding: ...
- DP:树DP
The more, The Better Time Limit: 6000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
- 2014在辛星Javascript口译科
***************概要*************** 1.Javascript是一种原型化继承的基于对象的动态类型的脚本语言,它区分大写和小写.主要执行在client,用户即使响应用户的操 ...
- 【LeetCode】Triangle 解决报告
[称号] Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjac ...
- (转)linux service理解
能够使用service命令进行操作的,就是已经注册成为linux的系统服务了.window中也可以注册成为系统服务的办法. service命令用的次数真不少,就是比较多的关联点,用了很多次了,还是有些 ...
- HDU 4513 哥几个系列故事——形成完善II manacher求最长回文
标题来源:哥几个系列故事--形成完善II 意甲冠军:中国 思维:在manacher断 保证非严格递减即可了 #include <cstdio> #include <cstring&g ...
- Servlet上传文件
Servlet上传文件 1.准备工作 (1)利用FileUpload组件上传文件,须要到apache上下载commons-fileupload-1.3.1.jar 下载地址:http://common ...