工欲善其事 工欲善其事,必先利器。

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调试技巧总结的更多相关文章

  1. iOS各种调试技巧豪华套餐

    转载自http://www.cnblogs.com/daiweilai/p/4421340.html 目录 前言 逼优鸡 知己知彼 百战不殆 抽刀断Bug 普通操作 全局断点(Global Break ...

  2. web调试技巧

    接触web不久,遇到了一些"奇怪"的问题,现将一些调试技巧总结如下:    1.欲添加某一样式,点击右键,查看源码    2.样式有问题,点击右键,审查元素 当然,还有一些经验总结 ...

  3. Chrome - JavaScript调试技巧总结(浏览器调试JS)

    Chrome 是 Google 出品的一款非常优秀的浏览器,其内置了开发者工具(Windows 系统中按下 F12 即可开启),可以让我们方便地对 JavaScript 代码进行调试. 为方便大家学习 ...

  4. Android开发--环境搭建和调试技巧

    一:环境搭建 (1)我使用的环境是:window8+Java SDK+Eclipse+Android SDK+ADT 安装步骤:Java SDK-->Eclipse--->ADT---&g ...

  5. 推荐几个不错的console调试技巧

    在我们的日常前端开发中,使用最频繁的莫过于使用console.log在浏览器的控制台中打印出我们需要调试的信息,但是大部分人可能跟之前的我一样,没有意识到其实console除了log方法以外,还有很多 ...

  6. 前台console调试技巧

    前台console调试技巧 一.console.log() 二.console.warn() 三.console.dir() 四.console.table() 五.console.assert() ...

  7. 【转载】Python 代码调试技巧

    https://www.ibm.com/developerworks/cn/linux/l-cn-pythondebugger/ Python 代码调试技巧 张 颖2012 年 5 月 03 日发布 ...

  8. 【工具】VS2010常用调试技巧(1)

    调试是一个程序员最基本的技能,其重要性不言自明.不会调试的程序员就意味着他即使会一门语言,却不能编制出好的软件.本文就本人在开发过程中常用的调试技巧作下简单呢介绍,希望对大家有所帮助,能力超群者请绕道 ...

  9. Visual Studio高级调试技巧

    1. 设置软件断点,运行到目标位置启动调试器 方法①:使用汇编指令(注:x64 c++不支持嵌入汇编) _asm 方法②:编译器提供的方法 __debugbreak(); 方法③:使用windows ...

随机推荐

  1. virtio-blk分析

    和virtio-network相同,virtio-blk驱动程序使用Virtio机制Guest它提供了一个高性能的设备I/O方法.我们期待在这里virtio-blk实现. [点击查看全文] http: ...

  2. Eclipse+Maven创建webapp项目<二> (转)

    Eclipse+Maven创建webapp项目<二> 1.开启eclipse,右键new——>other,如下图找到maven project 2.选择maven project,显 ...

  3. Cocos2dx 3.0开发环境的搭建--Eclipse建立在Android工程

    一.前言: 这部分描述了Cocos2d-x 3.0的一些基础内容,以及在Eclipse上上编译我们的Cocos2d-x项目,成功把Helloworld执行起来了.看完本篇博客之后.你就会知道Cocos ...

  4. 《图书管理系统——java》

    /* (程序头部凝视開始) * 程序的版权和版本号声明部分 * Copyright (c) 2011, 烟台大学计算机学院学生 * All rights reserved. * 文件名:    < ...

  5. 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 ...

  6. Lua Development Tools (LDT)

    http://www.eclipse.org/ldt/ Lua Development Tools (LDT) is about providing Lua developers with an ID ...

  7. Visual Studio 使用及调试必知必会

    原文:Visual Studio 使用及调试必知必会   一:C# CODING 技巧 1:TODO 然后 CTRL + W + T,打开任务列表,选中 Comments,就会显示所有待做的任务 2: ...

  8. 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 ...

  9. 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 ...

  10. 第十九章——使用资源调控器管理资源(2)——使用T-SQL配置资源调控器

    原文:第十九章--使用资源调控器管理资源(2)--使用T-SQL配置资源调控器 前言: 在前一章已经演示了如何使用SSMS来配置资源调控器.但是作为DBA,总有需要写脚本的时候,因为它可以重用及扩展. ...