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. SpringSecurity项目中如何在多个模块中配置认证信息

    ⒈在SpringSecurity项目中创建AuthorizeConfigProvider接口用于配置认证信息 package cn.coreqi.ssoserver.authorize; import ...

  2. python用ftplib上传下载中文报错解决

    python中的中文编码一直以来都是一个极为头大的问题,经常抛出编码转换的异常,python中的str和unicode到底是一个什么东西呢?在python中提到unicode,一般指的是unicode ...

  3. SIFT+BOW 实现图像检索

    原文地址:https://blog.csdn.net/silence2015/article/details/77374910 本文概述 图像检索是图像研究领域中一个重要的话题,广泛应用于医学,电子商 ...

  4. OpenStack实践系列①openstack简介及基础环境部署

    OpenStack实践系列①openstack简介及基础环境部署 一.OpenStack初探1.1 OpenStack简介 OpenStack是一整套开源软件项目的综合,它允许企业或服务提供者建立.运 ...

  5. 【原创】大数据基础之Logstash(2)应用之mysql-kafka

    应用一:mysql数据增量同步到kafka 1 准备mysql测试表 mysql> create table test_sync(id int not null auto_increment, ...

  6. Navicat系列产品激活教程

    准备 本教程可破解12.x版本,如果教程失效请联系我 # 19.1.11 破解暂时失效,请勿更新 (如已更新请卸载重新安装老版本,数据不会丢失 http://download.navicat.com/ ...

  7. 36)django-jsonp跨域

    一:什么是JSONP JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 serve ...

  8. Android&Java面试题大全—金九银十面试必备

    声明本文由作者:Man不经心授权转载,转载请联系原文作者原文链接:https://www.jianshu.com/p/375ad14096b3, 类加载过程 Java 中类加载分为 3 个步骤:加载. ...

  9. url加密和解密

    .NET中加密和解密有两种方式 string file="文件上(传)篇.doc";string Server_UrlEncode=Server.UrlEncode(file);s ...

  10. Confluence 6 查看系统信息

    系统信息界面提供了有关 Confluence 的配置信息和 Confluence 部署的环境信息. 希望对你的系统信息进行查看: 在屏幕的右上角单击 控制台按钮 ,然后选择 General Confi ...