这几年UI好像特别火，满大街的都是UI。为什么呢？这就要得益于互联网的推波助澜。无论是大公司还是小企业，都在做网站，做app, 所以他们需要UI啊，所以全民UI啊。

然而，最近我发现了一个神奇的东西，那就是F12键。功能简直不能更强大，可以直接copy别人家的设计，别人家的图片，别人家的... ...

有了F12，前端开发可以跳过设计，直接敲代码，而且做出来的效果还会比初级UI设计出来的东东，好上个十倍、百倍。

当我们正常的打开网页，比如打开“小米商城”，它是长这样的。

然后当我们按下F12键，调出调试器，你就会发现网页的右侧就出现HTML和CSS样式，

如果公司没有UI，那么前端就可以直接根据调试器里的样式，来编写自己的网页代码，复制出一个跟小米商城类似的网站，那么也就没有UI的什么事了。

你不失业，谁失业。

但是如果很不幸，你就是UI，看不懂代码没关系，F12键也将是提高你的工作效率的神器。

提高你的PC端找图效率 

如果你要设计一个商城，商品图片的质量直接关系到了网页设计的质量。那么找图将会花费掉你很大一部分时间和精力。但是现在，F12可以帮你解决这个问题。

打开淘宝，天猫，京东等商城购物网站，找到自己需要的商品图片或者banner，然后按下F12键，通过简单几个操作就可以得到你所需要的图片。

同样的以小米商城为例，红色矩形框住的部分就是我们需要划重点的部分。

通过5个步骤，我们就能得到自己想要的banner图片。

1.让带有箭头的那个图标处于选中状态 → 2.鼠标点击你所需要的图片，调试器里相对应的代码就会被选中 → 3.鼠标右键带下划线的图片链接 → 4.选择在新的标签页中打开链接 → 5.把新页面中的图片另存为到自己的文件夹

用一张图简单归纳出来就是，

就这样，别人的图片就变成你的了，而且同一个网页上的商品图片的尺寸和风格都是一致的，你不仅节省了找图的时间，同时也节省了处理图片的时间。

通过这种方式所得到的图片通常都是高清大图，网站的档次和逼格一下子就上去了。

节省你的APP项目找图时间

在用F12调出调试器的情况下，我们可以在PC模式和H5模式下切换自如。同样，红色矩形框住的部分需要我们重点掌握。

用鼠标点击两个大小不一样的矩形所组成的图标后，把它网址中的“www”改为“m”，它就进入到了正常的H5页面。然后，在iPhone6处，点击下拉图标，你可以切换到任何你需要的、不同屏幕尺寸的手机模式。

用一张图归纳如下：

在H5模式下，你也可以像之前一样“偷”别人家移动端的图片了。

如果你稍微懂一点代码，你不用再像之前一样，看到好的样式设计，先在手机里下载app，然后手机截图，然后传到电脑上，然后导进PS里，然后手动测量，然后再设计实施... ... 这样不仅麻烦，而且还会存在一定的误差。

通过H5模式，你可以直接查看别人家的版式间距，文字属性等等，简直不能更方便了。

神奇的F12键，无论是UI还是前端，都是必备技能。

写在最后，只有不断学习，才能永不失业。