console
- 移动端需要显示控制台打印， 不想使用alert。可以使用 vconsole;
- console有很多方法，比如info,log,dir,time,timeEnd等...
这里说console.log。 如果修改的项目中已经有很多console.log存在了。我们在调试中 怎么方便查找自己的log呢？
前面我也是 console.log('这是我要打印的东西啦啦啦啦', '真正自己需要看的')。
这样的确可以解决，但是可以有更优雅的方式。比如：
var obj = {name:'zs',age:14}
console.log(`%c obj的值是:%o`, 'background-color:#000;color:#fff;font-size:14px;', obj)
自己可以自定义打印的样式（背景色，字体大小等）。
这就是console.log中的占位符了。
上面我 %c是第一个占位，那么之后的第一个参数就是样式， %o是对象，之后的第二个参数就是对象。（推荐都是用%o. 如果用%s，如果是对象，打印不出来。相反，用%o,是可以打印字符串和整数的）
如果用vscode。设置快捷键生成console.log
code->首选项->用户片段->现在使用的片段
"Print to console7": {
"scope": "javascript,typescript",
"prefix": "console",
"body": ["console.log(`%c $1的值是:%o`, 'background-color:#000;color:#fff;font-size:14px;', $1)"],
"description": "Log output to console"
},
"Print to console8": {
"scope": "javascript,typescript",
"prefix": "log",
"body": ["console.log(`%c $1的值是:%o`, 'background-color:#000;color:#fff;font-size:14px;', $1)"],
// "body": ["console.log('$1');"],
"description": "Log output to console"
},
里面添加配置项。这个时候我们再vscode中 log tab键就可以自动出现配置好的console.log了。此时只需要输入需要打印的变量即可。
. 线上调试代理
- 利用fillder或chrales 等工具，把线上需要调试的文件 代理到本地，或代理到其他线上地址。（这个网上有很多，可以自己去搜索一下）
- 利用chrome控制台实现代理，本地修改。
比如：我想代理www.baidu.com
首先访问百度。并打开控制台。
点击 Sources-->Overrides-->+Select folder fro overrides
选择一个空的文件夹 。然后点击运行
接着 刷新页面，找到自己需要代理的文件（html,css,js等）， response里面右键 选择 Save for overiides.
就在在sorces中就出现了代理到本地的源文件了。
我们在文件中修改好(也可以用编辑器vscode等打开文件修改)，刷新页面就可以生效了
. postman 模拟接口请求
这个网上也很多, 这里也就不细说了
. 修改host指向
一般我们修改host 使用switchhost.
不过后来公司同事推荐了 mobile debug.
之后都使用mobile debug了。
可以使用它 修改host ,网站生成二维码，调试移动端等
具体使用可以去官网看看 https://www.mobiledebug.com/help/
. mac 使用safari 调试 手机页面
可以看看网友的使用方法：https://www.jianshu.com/p/f6209d0b8ed6
. 常用的chrome插件
-
EditThisCookie
该插件可以快速查看当前页面的 cookie。删除、修改等
image.png
当然要清除cookie。 也可以添加 网址旁边的图标，选择cookie清除所有也行
-
ColorPick Eyedropper
选取页面上的 某个颜色 。
image.png Header Editor
用来修改页面的cookie 。
比如本地开发启动页面时，访问线上的接口。如果接口有做cookie的身份校验。 本地是无法访问的。
这个时候，插件就起作用了。
首先 把它打开（此时我的是关闭状态，注意开启后很多网站会获取不到cookie, 关闭后才会恢复正常 ）
然后点击管理
如果没有，点击右下角的＋ 号，添加规则即可
cookie的值，先去获取线上接口的cookie，复制过来就行（记得先关掉这个插件，不然访问自己的线上接口，可能登陆都登陆不成功）
-
油猴(神器，强烈推荐)
image.png
这个网上有很多，自己网上搜一下吧
-
FeHelper
这个插件集合了很多功能
image.png
其他的vue,react 的插件这些就不举例了。
其他
下面仅仅是本人使用的其他工具
MotionPro
通过MotionPro可以通过企业服务器快速建立内网，用于企业内部访问.
在家远程链接公司内网，进行开发Microsoft Remote Desktop
在Mac上使用Microsoft Remote Desktop （MS_RDP）远程控制Win10电脑
我司 主要是为了解决mac 笔记本开发 兼容ie的情况 使用的FileZilla 和 Termius
FileZilla: FTP软件，很方便且免费。（支持FTP、FTPS、SFTP等文件传输协议）
Termius：termius是一款全平台的远程终端Xnip
小巧快速的剪切工具