前端chrome和webstorm技巧

一、chrome方向

1）自带内容

Element

edit hide delete... 拖拽
scroll Into View 定位不在视口的dom结构 style(调色板),computed(样式问题)
breack on dom断点功能

Console

debugger hover的时候 debugger 处理页面中hover或者mouseover的dom

console部分：

console.log;console.error;console.warn;console.Info

• console.assert断言
  console.assert('学敏'==='浩宇');断言的表达式为false的时候，向控制台打印你的内容
• console.count()//传递同样参数，显示count()次数；传递不同参数，默认参数是default

//函数被调用次数  
console.count('学敏')
console.count('浩宇')
console.count('学敏')
复制代码

• console.time()--console.timeEnd()

// 立即启动计时器   
    console.time()  
  for (let i = 0; i < 10000; i++) { // 某些操作 }  
// 立即结束计时器，并输出计时结果  
  console.timeEnd()
复制代码

• console.dir,如果是非dom和log一样，dom结果是打印所有属性和事件
• console.group()+console.groupEnd()将控制台输出的内容进行分组
• console.profile()+console.profileEnd()

var arr = new Array(10000000).fill(1);
function fun1 () { for (let i = 0, len = arr.length; i < len; i++) {} }
function fun2 () { for (let i = arr.length; i --; ) {} }
function fun3 () { for (let i = 0, item; item = arr[i++]; ) {} }
function fun () { fun1(); fun2(); fun3(); }
// 立即开始一个性能分析器
console.profile('测试for循环');
fun();
console.profileEnd('测试for循环');
复制代码

• $0~$4//点击dom倒序顺序 ;$_//控制台最后输出值

Sources

• {} 格式化压缩后的代码
• Blackboxing script 添加调试debug文件到黑名单（debug跳过） 删除 在setting中

Network

• copy as fetch //拷贝成fecth请求
• block request domain;block request url //拦截某个请求
• online //设置浏览器访问网速限制

more tools

• coverage 分析页面 js和css 占用比

其他

• 任务管理器 分析chrome各个窗口和插件性能
• 截图 command + shift + p 搜索screen
• 谷歌搜索
  设置语言啊和安全策略，翻墙后搜索的内容别有洞天

2）插件方向
react，redux，vuex，移动端eruda和vConsole，谷歌翻译，手势插件（crxmouse）...

二、webstorm编辑器方向

• 函数集合structure
• todo
• 快捷操作（///注释 cl等）

• 相关快捷键，（例如整行复制 command + D，格式化command + shift + L）
• Favorites收藏夹