01/8
2017
01/1
2017
调试移动设备上的网页很麻烦，因为手机上基本没什么调试工具。我们最常用的办法应该是在pc上模拟网页在手机里的运行效果，但如果遇到用模拟不能解决的问题，就又要发愁了。
倒闭公司谷人希家的chrome浏览器可以使用USB数据线调试Android手机上的网页，很好用，最近我找了些教程试了试，把步骤记录一下。
首先手机要是Android的，需要打开开发者模式并开启USB调试。
然后用手机上的浏览器（不知是否所有浏览器都可以，推荐用手机版chrome）打开要调试的网页，并使用USB数据线把手机连接到电脑上（如果有模式选择，可以选择传文件模式，不要选择仅充电）。电脑上需要有这个手机的驱动，如果没有驱动得自己去装（现在多数手机插上就会自动装驱动了吧）。
之后在电脑上chrome地址栏里打开chrome://inspect/#devices，会自动扫描通过USB连接的设备。
这个阶段可能在手机上会弹出USB调试的确认框，点同意。这样，chrome中就会显示出手机以及手机上打开的网页了。
要调试某个网页的话，点击它下面的“inspect”就可以了。chrome会打开一个新的窗口来显示这个页面，之后我们就可以用开发者工具来调试了：
如果操作步骤和设备都符合要求却不能显示/调试设备，那么可以尝试翻墙。
使用Chrome浏览器调试Android手机上的网页
05/25
2016
最近发现的，如果把表单input控件的type设置为date，chrome就会自动应用选择日期功能了。
<input type="date" name="">
首先输入框上会显示“年/月/日”的字样。
你可以点击这三项中的任意一个输入数字。
鼠标放上input之后，最右侧会显示一些操作按钮。点击最右侧的三角形，就会打开一个日期选择面板：
点击即可把选择的日期输进去。
这样在chrome上大部分时候都可以对各种日期输入插件说拜拜啦~来，跟我念：
谷人希谷人希谷人希谷人希谷人希谷人希谷人希谷人希谷人希谷人希谷人希谷人希……
试一试：
chrome对日期表单的支持
05/19
2016
如果chrome浏览器中有了重复书签，我们可以使用Bookmark Checker这个扩展来检查。但是Bookmark Checker的检查结果没有把重复书签放到一起，如果重复书签较多的话，找起来就非常费事。所以我写了一段JavaScript代码来重新组织Bookmark Checker的结果页面，以提高去重的效率。
首先安装Bookmark Checker，之后在浏览器的工具栏上点击它以打开操作界面。
在下拉框选择“duplicate”，然后点击下方的“check”按钮，即可开始检查重复的书签。
等它检查完毕并且显示了结果页面后，请打开控制台，粘贴执行位于本文末尾的代码。
Read More →
chrome查找重复书签之Bookmark Checker改进办法
05/3
2016
16.5.19更新：
推荐配合Bookmark Checker扩展来去除重复书签。方法见此。
因为种种原因，chrome中可能会存在一些重复的书签。我前天同步浏览器数据时就被坑了，有两百个书签重复了。
我先是找到了“Bookmark Checker”这个扩展，它可以检查重复书签，但显示结果时没有把重复项放一起，只能靠眼睛去找。而且它页面上的文字还无法复制，这导致我们无法使用ctrl+F来查找匹配项。最后我只好自己写一个。
使用步骤如下：
首先在书签管理器中导出书签为html文件，这个步骤不截图了，不会的可以百度。
导出之后，打开该html文件，如图：
使用JavaScript检查chrome中的重复书签
04/9
2016
如果你使用chrome访问本网站，你应该能看到本站的滚动条样式是自定义的。那我们要如何做呢？
其实chrome内置了一些伪类，使用它们可以控制滚动条的外观。例如：（less 语法）
.beautify_scrollbar {
// 滚动条整体
// width 是垂直滚动条的宽度，height 是水平滚动条的高度
&::-webkit-scrollbar {
width: 10px;
height: 10px;
}
// 整个滚动条的底色
//&::-webkit-scrollbar-track {background:#fcfcfc;}
// 滚动条的滑块部分
&::-webkit-scrollbar-thumb {
background-color: #3AB8F2;
border-radius: 10px;
}
// 垂直滚动条的滑块部分
// &::-webkit-scrollbar-thumb:vertical {
// background-color: #3AB8F2;
// border-radius: 10px;
// }
// 水平滚动条的滑块部分
// &::-webkit-scrollbar-thumb:horizontal {
// background-color: #3AB8F2;
// border-radius: 10px;
// }
}
如果你要对特定元素设置滚动条，而不是对整个页面设置，那么需要在伪类前面加上这个元素的选择器。
修改chrome的滚动条样式
12/18
2015
昨天在做图的痛苦煎熬中，忽然脑子一抽想到了鼠标双击事件（看啊，我不得不思考代码以减轻做图的痛苦了。可见做图是多么惨无人道的事情）。于是鼓捣了两个玩意出来。
第一个代码是自定义鼠标双击事件。我们知道，JavaScript的鼠标双击事件（ondblclick）的判定时间是有阈值的。如果我们想自己定义，例如必须间隔在200毫秒以内才算双击，又比如想把时间间隔延长到1000毫秒。这时候可以自己设置时间阈值，满足条件就执行事件代码：
var click0=null;//第一次点击的时间戳
var clickTimeOut=500;//自定义允许的时间间隔
document.onclick=function () {
var d=new Date();
if(click0==null){
click0=d.getTime();
}else{
if(d.getTime()-click0>clickTimeOut){
//console.log("不是双击");
click0=d.getTime();
}else{
console.log("一次双击");
click0=null;//初始化
}
}
}
这个和浏览器的判定应该是一样的了（至少从结果来看）。这也是数次修改之后的结果，改进的地方有（完全可以不看）：
1.把相邻两次单击进行判断。例如鼠标点击了3次，第1次和第2次的间隔超时，第2次和第3次间隔在规定时间内。可以把第2和第3次点击识别为双击，而不是必须1、2判断一次，3、4再判断一次。
2.但是当一次双击事件触发之后，必须再进行至少两次单击才可以触发双击判定。例如3次单击间隔都在规定范围内，在把第1次和第2次识别为双击之后，不会把第3次和第2次连起来，认为又是一次双击。
Read More →
js自定义鼠标双击事件以及对其的一些思考
12/2
2015
虽然也没什么卵用就是了。使用chrome的Tampermonkey扩展，新建脚本，作用域为“http://tieba.baidu.com/*”，首先在头部注释里引用keymaster.js：
// @require /f/keymaster.js
然后添加如下js代码：
key('alt+a', function(){
var _allList=document.getElementsByClassName("threadlist_detail");
if(_allList[0].style.display!="none"){
for (var i = 0; i < _allList.length; i++) {
_allList[i].style.display="none";
};
}else{
for (var i = 0; i < _allList.length; i++) {
_allList[i].style.display="block";
};
}
return false;
});
在页面中按快捷键alt+a（这个可以自己修改），可以隐藏/显示帖子摘要内容。
没什么技术含量的东西，不过一开始没想到用Tampermonkey来做，费了不少事，走了两次弯路←_←
隐藏百度贴吧帖子列表的摘要内容
04/10
2015
今天在chrome上安装了Tampermonkey扩展，折腾一番后想起来给贴吧发帖框添加小尾巴。于是去尝试一番，现在成功了。
document.getElementsByClassName("poster_submit")[0].addEventListener('click', function(){
var ueditorAllP=document.getElementById('ueditor_replace').getElementsByTagName('p');
ueditorAllP[ueditorAllP.length-1].innerHTML+='<br><br>Servant Saber、召唤に従い参上した。';
}, true)
原理是给提交按钮添加一个事件，当点击它的时候，在输入框内最后一个P标签内（因为每次按enter换行都会产生一个新的P标签）的html代码中，追加小尾巴的html代码。注意不能使用innerText，因为这样的话，如果最后一个P标签内有图片，则图片会被文字替换，图片就没了。
PS：Tampermonkey可以引用外部js文件，格式是使用// @require，然后在后面加上js文件的url，如下：
// @require /f/keymaster.js
使用Tampermonkey给贴吧发帖加上小尾巴
10/15
2014
今天在某网站看到导航的英文标签用css来缩小了字体
-webkit-transform:scale(0.84,0.84);
这使12px的字体显示的像9px左右，但是看起来不是很自然了。我刚开始很奇怪，因为用的arial字体即使在小于12px的情况下也有很好的表现，后来我去掉这条属性，直接把字号改成9px，却发现无效，这才想起来chrome里面字号小于12px的话也是按12px显示的，这个方法大概可以算是一个变通的方法了。
