java Web 利器之Chrome F12

本系列记录java Web开发常用的一些工具，本文介绍chrome F12

终于有网上了，在此向我的组员，致以真诚的道歉（尽管他们也收不到）...

背景:和几个同学想要做一个类似智联招聘的网站，我负责做搜索模块，开始做界面时，我想通过Chrome的F12来查看智联招聘的首页的css样式。后面发现F12真的很强大，于是决定通过F12把整个“智联招聘”首页仿制在本地服务器上，在此把仿制过程记录之。 欢迎大侠拍砖指导。

文字描述太慢了，来个视频的，录屏没录好大家谅解

http://video.sina.com.cn/v/b/111596339-2918536742.html

Chrome F12简介:

chrome的F12键很类似IE的开发者工具，能帮助开发者调试js、css、获取网站的请求信息、测试网站性能等等。

实操过程一:仿写搜索框（呜呼，我学java是想写后台的，界面这样费力不一定好看的东西...作为一个有节操的程序员还是要写一下的）。

访问智联招聘首页，打开开发者调试工具:

1.Png

由上图可知，该搜索表单引用的css为：index.min.css，可以把整个css文件导入也可以找到对应的代码段，导入代码段。就开发速度而言可定是前者快，于是我选择前者。

2.Png

当然还要下载对应的图片，并修改css中图片的路径