1清空控制台

在控制台下有个clear console的按钮,点击的时候会清空控制台。

清空控制台 

2让Chrome中的页面可编辑

有的时候我们需要临时改变页面上的文字,图案等信息,一种常见的方法是打开Elememts,然后在修改页面的源码,这种做法比较麻烦。如果需要修改多处,需要频繁的修改源码。

而通过Chrome的控制台Console中,只需要下面一句简单的代码就可以使得整个页面变得可编辑(划重点)。

document.body.contentEditable=true

变成可编辑的代码

实际的效果图如下所示。 

3.格式化代码

在Chrome控制台的Source面板下,我们可以查看到页面的源文件,包括js,css,img等。但是有些网站经常会将js或者css文件进行压缩,对开发人员来说不友好,如果想要查看的话通过点击一个按钮,就可以轻松实现代码格式化。

3.console代码

1、console.log 用于输出普通信息

2、console.info 用于输出提示性信息

3、console.error用于输出错误信息

4、console.warn用于输出警示信息

5、console.debug用于输出调试信息

7、console.group输出一组信息的开头

8、console.groupEnd结束一组输出信息

12、console.time 计时开始

13、console.timeEnd 计时结束

Chrome开发者控制台操作教程的更多相关文章

  1. [转]谷歌Chrome浏览器开发者工具教程—基础功能篇

    来源:http://www.xiazaiba.com/jiaocheng/5557.html Chrome(F12开发者工具)是非常实用的开发辅助工具,对于前端开发者简直就是神器,但苦于开发者工具是英 ...

  2. Chrome 开发者控制台中,你可能意想不到的功能

    Chrome 有内置的开发者工具.它拥有丰富的特性,比如元素(Elements).网络(Network)和安全(Security).今天,我们主要关注一下 JavaScript 控制台. 当我最初写代 ...

  3. 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试

    转自:https://www.ibm.com/developerworks/cn/web/1410_wangcy_chromejs/ 引言 Google Chrome 是由 Goole 公司开发的一款 ...

  4. Chrome 开发者控制台使用技巧

    Chrome 有内置的开发者工具.它拥有丰富的特性,比如元素(Elements).网络(Network)和安全(Security).今天,我们主要关注一下 JavaScript 控制台. 当我最初写代 ...

  5. HTTP入门(二):用Chrome开发者工具查看 HTTP 请求与响应

    HTTP入门(二):用Chrome开发者工具查看 HTTP 请求与响应 本文简单总结HTTP的请求与响应. 本文主要目的是对学习内容进行总结以及方便日后查阅. 详细教程和原理可以参考HTTP文档(MD ...

  6. Chrome开发者工具不完全指南:(三、性能篇)

    卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板,其中包括Elements.Network.Resources基础功能部分和Sources进阶功能部分,对于一般的网站项目来说,其实就是需 ...

  7. Chrome开发者工具不完全指南(四、性能进阶篇)

    前言 Profiles面板功能的作用主要是监控网页中各种方法执行时间和内存的变化,简单来说它就是Timeline的数字化版本.它的功能选项卡不是很多(只有三个),操作起来比较前面的几块功能版本来说简单 ...

  8. Chrome开发者工具不完全指南(五、移动篇)

    前面介绍了Chrome开发者工具的大部分内容工具,现在介绍最后两块功能Audits和Console面板.一.Audits Audits面板会针对目前网页提出若干条优化的建议,这些建议分为两大类,一类是 ...

  9. Chrome开发者工具详解(5)-Application、Security、Audits面板

    Chrome开发者工具详解(5)-Application.Security.Audits面板 这篇文章是Chrome开发者工具详解这一系列的最后一篇,介绍DevTools最后的三个面板功能-Appli ...

随机推荐

  1. Android AlertDialog 绝对位置计算

    public class Main2Activity extends AppCompatActivity { @Override protected void onCreate(Bundle save ...

  2. HDOJ 1754 I Hate It (线段树)

    题目: Problem Description 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少.这让很多学生很反感.不管你喜不喜欢,现在需要你做的是,就是按照老师的要 ...

  3. 海马玩模拟器——搭建React Native环境

    Visual Studio Emulator for Android 模拟器国内这网络环境不太用,所以使用海马玩模拟器,给大家推荐一下! 下面开始配置环境: 1)下载1.8+JDK,配置JDK环境参考 ...

  4. Class的isAssignableFrom方法

    Class类的isAssignableFrom是个不常用的方法,感觉这个方法的名字取得不是很好,所以有必要在此解析一下,以免在看源码时产生歧义,这个方法的签名如下: public native boo ...

  5. 生产环境使用 pt-table-checksum 检查MySQL数据一致性【转】

    公司数据中心从托管机房迁移到阿里云,需要对mysql迁移(Replication)后的数据一致性进行校验,但又不能对生产环境使用造成影响,pt-table-checksum 成为了绝佳也是唯一的检查工 ...

  6. web服务器上某一中文名文件无法访问

    只需要在此目录下    convmv  -f GBK -t UTF-8 --notest  *.xxx 执行这个命令即可

  7. 线性回归,逻辑回归,神经网络,SVM的总结

    目录 线性回归,逻辑回归,神经网络,SVM的总结 线性回归,逻辑回归,神经网络,SVM的总结 详细的学习笔记. markdown的公式编辑手册. 回归的含义: 回归就是指根据之前的数据预测一个准确的输 ...

  8. oracle 多行变一行 wmsys.wm_concat

    背景        还是那个问题,部分程序员喜欢用sql解决问题.发现了这个函数,当初真是大喜过望,现在是哭笑不得.10g支持这个函数,11好像不支持了,而且只有oracle支持,其实自己写个通用方法 ...

  9. Linux基础知识之bashrc和profile的用途和区别

    使用终端ssh登录Linux操作系统的控制台后,会出现一个提示符号(例如:#或~),在这个提示符号之后可以输入命令,Linux根据输入的命令会做回应,这一连串的动作是由一个所谓的Shell来做处理. ...

  10. mysql:批量插入不同的UUID

    INSERT INTO t_base_role_resource_ref (refID, roleID, resID, orgID, belongTo) SELECT uuid() AS refID, ...