Chrome开发者控制台操作教程
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开发者控制台操作教程的更多相关文章
- [转]谷歌Chrome浏览器开发者工具教程—基础功能篇
来源:http://www.xiazaiba.com/jiaocheng/5557.html Chrome(F12开发者工具)是非常实用的开发辅助工具,对于前端开发者简直就是神器,但苦于开发者工具是英 ...
- Chrome 开发者控制台中,你可能意想不到的功能
Chrome 有内置的开发者工具.它拥有丰富的特性,比如元素(Elements).网络(Network)和安全(Security).今天,我们主要关注一下 JavaScript 控制台. 当我最初写代 ...
- 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
转自:https://www.ibm.com/developerworks/cn/web/1410_wangcy_chromejs/ 引言 Google Chrome 是由 Goole 公司开发的一款 ...
- Chrome 开发者控制台使用技巧
Chrome 有内置的开发者工具.它拥有丰富的特性,比如元素(Elements).网络(Network)和安全(Security).今天,我们主要关注一下 JavaScript 控制台. 当我最初写代 ...
- HTTP入门(二):用Chrome开发者工具查看 HTTP 请求与响应
HTTP入门(二):用Chrome开发者工具查看 HTTP 请求与响应 本文简单总结HTTP的请求与响应. 本文主要目的是对学习内容进行总结以及方便日后查阅. 详细教程和原理可以参考HTTP文档(MD ...
- Chrome开发者工具不完全指南:(三、性能篇)
卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板,其中包括Elements.Network.Resources基础功能部分和Sources进阶功能部分,对于一般的网站项目来说,其实就是需 ...
- Chrome开发者工具不完全指南(四、性能进阶篇)
前言 Profiles面板功能的作用主要是监控网页中各种方法执行时间和内存的变化,简单来说它就是Timeline的数字化版本.它的功能选项卡不是很多(只有三个),操作起来比较前面的几块功能版本来说简单 ...
- Chrome开发者工具不完全指南(五、移动篇)
前面介绍了Chrome开发者工具的大部分内容工具,现在介绍最后两块功能Audits和Console面板.一.Audits Audits面板会针对目前网页提出若干条优化的建议,这些建议分为两大类,一类是 ...
- Chrome开发者工具详解(5)-Application、Security、Audits面板
Chrome开发者工具详解(5)-Application.Security.Audits面板 这篇文章是Chrome开发者工具详解这一系列的最后一篇,介绍DevTools最后的三个面板功能-Appli ...
随机推荐
- 使用@JsonView注解控制返回的Json属性
我也是刚看到原来还可以这么玩,但是我还是习惯使用Dto,我总感觉这样做的话实体类耦合程度有点高.还是记录以下,万一今后用到了呢 ⒈在实体类中使用接口来声明该实体类的多个视图. ⒉在实体类的属性get方 ...
- 20165231 2017-2018-2《Java程序设计》课程总结
每周作业链接汇总 预备作业一:我期待的师生关系 预备作业二:学习基础和C语言基础调查 预备作业三:linux安装及学习 第一周作业:初识JAVA,注册码云并配置Git 第二周作业:JAVA基本语法,标 ...
- How to Train Triplet Networks with 100K Identities?
1. 为什么介绍此文? Triplet net 改进工作之一,主要思想是在大数据集(人脸识别)上的困难样本挖掘.人脸识别工作对于图像对匹配而言很有借鉴意义,共性是特征的提取和样本数据的挖掘. Trip ...
- HTTP协议03-http特点及请求方式
无状态: HTTP是一种不保存状态,既无状态协议.HTTP自身不对请求和响应之间的通信状态进行保存,也就是说不做持久化处理.这是为了更快处理大量事务,确保协议的可伸缩性. 随着web的不断发展,无状态 ...
- Xml 文件读取
.NET 读取Xml文件,用到XmlDocument类. 1.要获取文档的根: DocumentElement. 2.Attributes :获取 XmlAttributeCollection 包含此 ...
- vc++基础班[26]---进程的相关操作
①.ShellExecute 进行进程的创建,属于 shell api: //int iRet = (int)ShellExecute(m_hWnd, _T("open"), ...
- 无线桥接(WDS)如何设置?
一.WDS使用介绍 无线桥接(WDS)可以将多台无线路由器通过无线方式互联,从而将无线信号扩展放大.无线终端在移动过程中可以自动切换较好的信号,实现无线漫游. 本文指导将TL-WR740N当作副路由器 ...
- VS2013 VS2015 VS2017调试出现无法启动iis express web服务器
最近老是遇到这个问题,天天如此,烦死人,网上答案繁多,但是都解决不了,也是由于各种环境不同导致的,这里把几种解决方法都记录下 一.其他项目都可以,就这么一个不行 因为其他项目都可以,就这么一个不行,所 ...
- POJ 1741 Tree 树上点分治
题目链接:http://poj.org/problem?id=1741 题意: 给定一棵包含$n$个点的带边权树,求距离小于等于K的点对数量 题解: 显然,枚举所有点的子树可以获得答案,但是朴素发$O ...
- python操作三大主流数据库(2)python操作mysql②python对mysql进行简单的增删改查
python操作mysql②python对mysql进行简单的增删改查 1.设计mysql的数据库和表 id:新闻的唯一标示 title:新闻的标题 content:新闻的内容 created_at: ...