昨晚写代码的时候惊喜的发现Chrome中能直接使用一些ES6的语法: let, const, 箭头函数等已经能直接使用. 酷酷的. 另外我的Chrome版本还是比较旧的,并不需要最新版本.…

本文内容都来源于偶整理的fetool. 想让更多使用Chrome的小伙伴,体验到这些令人愉悦的小工具,所以单独整理了这篇文章. 如果你是 前端/服务端/设计/面向Github编程/视觉控,相信下列的插件有不少你会用到,期待你能喜欢:) Chrome 应用商店必定是需要FQ的哈. 以下插件都是俺多年积累淘出来的,数量不多,所以就不区分 Github 插件和非 Github 插件了.按照俺推荐的强度自上向下展示,且大多数插件就是偶工作和生活必备,希望能对大家有用.后续如有新发现好插件,偶也会及时更新…

新发现,在我开发过的组件中表格组件是采用Table生成的,而在Webkit内核浏览器中,Table的列顺序是倒着生成的,所以在组件中要做兼容. 现在Chrome浏览器版本已经升级到36了.发现Table的列顺序是正这生成,所以还要加入代码去判别webkit内核浏览器并且版本是36以下的 做兼容. 到此为止:以前,用Table元素使用insertCell生成的表格列的前端表格组件要有问题喽. 转载请注明出处:http://www.cnblogs.com/wsoft…

本文内容都来源于偶整理的fetool. 想让更多使用Chrome的小伙伴,体验到这些令人愉悦的小工具,所以单独整理了这篇文章. 如果你是 前端/服务端/设计/面向Github编程/视觉控,相信下列的插件有不少你会用到,期待你能喜欢:) Chrome 应用商店必定是需要FQ的哈. 以下插件都是俺多年积累淘出来的,数量不多,所以就不区分 Github 插件和非 Github 插件了.按照俺推荐的强度自上向下展示,且大多数插件就是偶工作和生活必备,希望能对大家有用.后续如有新发现好插件,偶也会及时更新…

我在写插件时用到了 onresize 事件,在反复地测试后发现该事件在 Chrome 及 Opera(内核基本与 Chrome 相同,以下统称 Chrome)浏览器打开时就会执行,这种情况也许不能算作 bug 吧,估计他们的工程师认为浏览器打开时也算窗口发生了变化.解决问题之前我搜索了相关内容,确实有关于 Chrome 的 onresize 的问题,但跟我遇到的问题还有很大不同.我把这个问题抽象为以下函数: function init() { alert('a'); window.onresiz…

今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css只能是改变IE浏览器的颜色,而且CSS不能做到改变火狐浏览器的样式和颜色.所以只能是通过JavaScript来实现了.也有插件可以做到.我分享一下我自己使用原生JavaScript实现的思路.先上个图看下效果: JavaScript实现的思路就是模拟浏览器自身滚动条.我制作的思路是先将整个文档放在一…

Chrome出了个小bug:论如何在Chrome下劫持原生只读对象 概述 众所周知,虽然JavaScript是个很灵活的语言,浏览器里很多原生的方法都可以随意覆盖或者重写,比如alert.但是为了保证网页的安全性和网页制作者的一定控制权,有些浏览器对象是无法更改的,比如"window.location"对象,或者对它们的更改是无效的,比如"window.navigator"对象.然而,最近我发现Chrome出现了一个小"bug",在Chrome…

chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1.7可用). 1. 安装扩展Stylish 2. 打开Stylish并且新建一个样式 3. 为新样式取一个名字并输入下面样式代码: [id="most-visited"]{display:none} 4. 选择选项 "网址",并且在后面的地址栏输入网址: https:/…

谷歌Chrome,是当前最流行且被众多web开发人员使用的浏览器.最快六周就更新发布一次以及伴随着它不断强大的开发组件,使得Chrome成为你必备的开发工具.例如,在线编辑CSS,console以及debugger这些常用的调试技术,或许你已经了解.在本篇文章中,我们将介绍15个炫酷且实用的技巧,这将更快的提高你的开发效率. 该篇博客原文地址:http://www.cnblogs.com/giggle/p/5966991.html 一.快速查找文件 如果你使用过Sublime,那么你会知道’Go…

Chrome插件是令人惊讶的简单,一旦你弄懂它的工作和实现原理.它是由一部分HTML,一部分Js,然后混合了一个叫做manifest.json的Json文件组合而成的整体.这意味着你可以使用你最擅长的js框架去实现它. 如果你还是一个Chrome插件的新手并且想尝试写一个的话,下面的文章将会带领大家并且尝试让大家理解Chrome插件的工作机制.这篇文章将会讲述每一块架构,以及相互之间的联系和插件的一般化形式. 架构 Chrome插件中的文件大体上可以分成2部分:Chrome插件中确确实实存在的文…

首先大家可以去这个地址下载 Postman_v4.1.3 这个版本,我用的就是这个版本 http://chromecj.com/web-development/2014-09/60/download.html 下载完以后以后加压大概就是这个模样,其中.crx是我们要执行的文件,红色框里的叫私有秘钥文件 此时不能直接拖拽到谷歌浏览器的扩展程序界面,如果你直接把.crx文件拖拽到扩展程序的界面会有如下错误提示,说只能通过谷歌浏览器的 网上应用商店添加该程序,为什么会出现该情况呢? 是因为自 Chro…

这个小问题也确实困扰我许久,后来看到chrome吧里面有人给出了解决方案: 安装install_flash_player_ppapi, 该软件下载地址:http://labs.adobe.com/downloads/flashplayer.html  下载windows的第三个. 然后刚刚看到chrome新版本将html5取代flash成为默认选项...那以后是不是就没有flash播放器了?…

2-3年前在做客户端开发时,看过CHROME的一部分代码,主要是BASE库相关的.其项目之大,编译时间之长给我留下了深刻的印象. 3年后的最近,想着再读一下其他部分的代码,所以就对其纠结的下载和编译过程做下总结. 网上的一些文章都是比较过时的,按照那些文章的做法基本没啥戏.其实,仔细阅读chromium中关于Get Source Code页面的说明就能开耍了.现在的整个流程要比之前的流程感觉清晰多了. 我的环境是WIN7 SP1 + VS2013 UPDATE4.最新的chrome代码引入了一些…

原文请访问个人博客:chrome拓展开发实战:页面脚本的拦截注入 目前公司产品的无线站点已经实现了业务平台组件化,所有业务组件的转场都是通过路由来完成,而各个模块是通过requirejs进行统一管理,在灰度测试时会通过grunt进行打包操作,虽然工程化的开发流程已经大大提升了效率,但是为了满足不同平台在任意业务入口页面一键注入业务脚本即可进行测试的实际需求,团队尝试通过chrome拓展来进行实现.由于我本人是第一次开发chrome拓展插件,所以开发的过程中遇到不少坑,某些功能的实现方式也未必是最…

本文将从个人经验出发,讲述为什么需要Chrome插件,如何开发,如何调试,到哪里找资料,会遇到怎样的问题以及如何解决等,同时给出一个个人认为的比较典型的例子——获取网页内容,和服务器交互,再把信息反馈给用户.OK,准备开始吧,我尽量把文章写得好看点,以免读者打瞌睡. 目录 为什么需要 为什么是Chrome 需要准备什么 如何开始 Page Action Chrome插件结构 学习资料 我的例子 调试 调试Content Scripts 调试Background 调试Popup 一些问题 总结 为…

Chrome的开发者工具已经强大到没朋友的地步了,特别是其功能丰富界面友好的console,使用得当可以有如下功效: 更高「逼格」更快「开发调试」更强「进阶级的Frontender」 Bug无处遁形「Console大法好」 console.log 大家都会用log,但鲜有人很好地利用console.error , console.warn 等将输出到控制台的信息进行分类整理. 他们功能区别不大,意义在于将输出到控制台的信息进行归类,或者说让它们更语义化. 各个所代表的语义如下: console.…

问题: 开发的公司内部后台应用页面显示异常,获取不到资源 F12 提示 net::ERR_BLOCKED_BY_CLIENT 很困惑,用Chrome打开页面就异常,IE什么的就没问题- 原因:广告拦截插件(我这儿是Adblock Plus,也可能是其他插件-全家桶系列什么的-) 解决:把域名添加到白名单…

新开发的网页需要在手机或是模拟机上运行测试,如果手头事件比加紧,那么可以借助 Chrome提供的手机网页预览程序进行简单调试.查看 制作的网页是否能够适合各种手机型号使用. 下面所以下如何使用Chrome调试多类型手机网页. 首先 下载Chrome 浏览器. 在你要调试的网页或是本地页面中.按F12 打开调试器. 工具/原料 Chrome浏览器 方法/步骤   打开 仿真面板.如图所示:   可以在 Device 选择设备. 可以在Screen  设置模拟的屏幕方面的东西,设置分辨率,屏幕尺寸.…

做过 web 开发的都知道:浏览器会把重要的认证登录认证信息存放到 cookie 中,在 cookie 有效期内,再次访问这个网站的时候就可以直接从 cookie 中获取到登录信息,这样就可以实现自动登录.但仅仅知道知道这些肯定不能满足很多人的旺盛的求知欲,那么我就 mac 系统下的 Chrome 浏览器 cookie 来做一次深入的讲解. 在mac操作系统下,Chrome 浏览器的cookie文件路径是 ~/Library/Application Support/Google/Chrome/D…

名称 作用 下载地址 Postman 模拟各种http请求 点击下载 JSON Viewer 访问json结果自动视图化 点击下载 Axure RP Extension for Chrome 查看Axure原型图 点击下载 注意:下载地址都需要FQ.…

这个问题应该确确实实是一个Chrome的BUG,我在自己的编程环境中发现,并在多个服务器,多个编程语言的运行环境,以及多个浏览器下都测试过,都看到有2次请求出现.为了证明不是自己环境的问题,我也特意去找了一些其他站点,用它里面的一些会产生重定向的请求来测试.比如这个请求地址http://wenda.golaravel.com/account/openid/qq_login/,这是golaravel问答模块进行qq登录的链接地址,它会重定向到qq授权登录的页面. 使用fiddler监控wenda.…

网上有关Chrome调试的文章一搜一大堆,本文主要记录一下自己平时经常用并且又比较冷门的一些技巧. 打开Chrome调试工具 1.打开控制台的情况下,长按页面的“刷新”按钮可以选择按何种方式刷新(有正常重新加载.硬性重新加载.清空缓存硬性重新加载三种); Element 1.选中一个Dom元素之后,可以添加属性(enter).修改Dom节点(F2).删除Dom节点(delete).toggle 元素的 visibility 属性(h); 2.可以拖拽节点, 调整Dom顺序,也可以直接拖拽节点到编…

Chrome DevTools有几个内置的快捷键,可以节省你的日常工作的时间. 本指南提供了Chrome DevTools中每个快捷键的快速参考.虽然一些快捷方式在全局范围内可用,但其他的快捷方式用于特定的某些单个面板,并根据它可以使用的位置分解. 您还可以在提示工具中找到快捷方式.将鼠标悬停在某个元素上以显示其提示工具.如果元素有快捷方式,提示工具将会包含它. 打开开发者工具 在Google Chrome中的任何网页或APP都可以打开开发者工具: 在浏览器窗口的右上角打开Chrome menu…

什么问题 WEB开发过程中,很多时候我们都是写一些简单的Demo,并不是开发一个完整项目,此时我们常见的操作是: 新建文件夹 新建需要的文件 在Sublime(或其他编辑器)中完成DEMO的编码 双击HTML文件,直接在浏览器中运行演示 如果此时Demo中有AJAX操作,浏览器就会报一个错: XMLHttpRequest cannot load file:///Users/iceStone/Documents/Learning/angular/demo/angular-moviecat/movi…

问题??打开Google Chrome浏览器报错如下: 结论  浏览器出于安全性考虑,默认对跨域访问禁止 解决方法  给浏览器添加启动参数 --allow-file-access-from-files后确认即可,如下图 参考资料出处 http://blog.csdn.net/rywaqpf/article/details/44836965 https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-sup…

运用js实现将页面中的table导出为excel文件,页面显示如下: 导出的excel文件显示如下: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> table{border-collapse: collapse; } th, td{border: 1px solid #4d4d4d;pad…

取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: input::-ms-clear { display: none; }…

在Ubuntu 14.04下安装Google Chrome浏览器非常简单,只要到Chrome的网站下载Deb安装包并进行安装即可.当然你也可以使用APT软件包管理器来安装Google Chrome浏览器,如果你想使用APT软件包管理器安装Google Chrome浏览器的话,本文将介绍这两种方法. 目前Linux下的Google Chrome浏览器有三个版本,稳定版.Beta(测试版)和Unstable(不稳定版,也就是Dev版).其中Beta相对较稳定,而最新的功能将会先出现在Unstable…

据说,今年9月份开始,谷歌将在Chrome浏览器中全面禁用NPAPI插件,Chrome 45以后将无法再加载NPAPI插件,并推出了一种新的机制:扩展. 其实,如果把浏览器看作一块画布的话,NPAPI插件就像挂在画布上的各种小饰品,而扩展更像拼接在画布外小拼图.无论是插件还是扩展,都是为了让这副画更符合用户的期望.下面就只准备简单介绍一下扩展和Native Message机制. 扩展安装包 一个完整的扩展包,最终会一个.crx的压缩文件包存在,使用zip的解压文件可以直接打开的. 扩展安装,共有…

起因是刷知乎时碰到这么个问题:https://www.zhihu.com/question/41400503 问题代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <style> .cf { zoom: 1; } .cf:after { clear: both; content: ""; dis…