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 ...
随机推荐
- virtio-blk分析
和virtio-network相同,virtio-blk驱动程序使用Virtio机制Guest它提供了一个高性能的设备I/O方法.我们期待在这里virtio-blk实现. [点击查看全文] http: ...
- Eclipse+Maven创建webapp项目<二> (转)
Eclipse+Maven创建webapp项目<二> 1.开启eclipse,右键new——>other,如下图找到maven project 2.选择maven project,显 ...
- Cocos2dx 3.0开发环境的搭建--Eclipse建立在Android工程
一.前言: 这部分描述了Cocos2d-x 3.0的一些基础内容,以及在Eclipse上上编译我们的Cocos2d-x项目,成功把Helloworld执行起来了.看完本篇博客之后.你就会知道Cocos ...
- 《图书管理系统——java》
/* (程序头部凝视開始) * 程序的版权和版本号声明部分 * Copyright (c) 2011, 烟台大学计算机学院学生 * All rights reserved. * 文件名: < ...
- define a class for a linked list and write a method to delete the nth node.
1.问题 define a class for a linked list and write a method to delete the nth node. 2.算法 template <t ...
- Lua Development Tools (LDT)
http://www.eclipse.org/ldt/ Lua Development Tools (LDT) is about providing Lua developers with an ID ...
- Visual Studio 使用及调试必知必会
原文:Visual Studio 使用及调试必知必会 一:C# CODING 技巧 1:TODO 然后 CTRL + W + T,打开任务列表,选中 Comments,就会显示所有待做的任务 2: ...
- Oracle Product Hub / Product Lifecycle Management / Product Information Management / Advanced Produc
In this Document Goal Solution 1. Master List showing sample code for APIs in Product Data Hub ...
- LeetCode Solutions : Reorder List
→-→Ln-1→Ln, reorder it to: L→Ln-2→- You must do this in-place without altering the nodes' values. Fo ...
- 第十九章——使用资源调控器管理资源(2)——使用T-SQL配置资源调控器
原文:第十九章--使用资源调控器管理资源(2)--使用T-SQL配置资源调控器 前言: 在前一章已经演示了如何使用SSMS来配置资源调控器.但是作为DBA,总有需要写脚本的时候,因为它可以重用及扩展. ...