Ⅰ 浏览器开发者工具怎么修改本地网页
1/7 分步阅读
开发者工具的开启方法：打开任意一款浏览器，点击“工具”菜单项，从弹出的下拉菜单中点击“开发者工具”即可打开。
2/7
利用开发者工具来修改网页内容：
在开发者工具界面中，点击左侧的“搜索”按钮，该按钮用于选择网页中的一个元素。
3/7
该选择工具具有网页元素自动识别功能，可以自行定位并找到最小的元素，如图所示，小编选择其中一个连接文字 并点击。
4/7
点击对应的文字链接后，在开发者工具界面中会自动定位到相应的HTML代码处。
5/7
如何修改当前行代码呢？右击当前行，从弹出的右键菜单中选择“Edit As HTML”项，即以HTML形式进行编辑。
6/7
此时将出现编辑窗口，这样我们就可以对当前代码行进行编辑操作啦，如图，小编将“贴吧”修改成“网络经验”。
7/7
最后查看网页内容，就会发现网页内容被改变啦。
Ⅱ Chrome浏览器F12开发者工具的几个小技巧总结
1、直接修改页面元素
选择页面上元素，右键“检查”，会打开开发者工具窗口，显示当前选择元素的源代码，可以双击进行修改。
如果要修改的东西比较多，可以折叠元素并单击选择，再右键Edit as HTML修改。
2、颜色取色器
选择页面上元素，右键“检查”，会打开开发者工具窗口，在Styles窗口中，点击一个样式的color右边小方块（如没有color可自己输入如color:red），会弹出颜色拾取器，可以在上面颜色画板上选择一个颜色，也可以选择“笔”图标可以拾取页面上元素的颜色。
3、快速查找并定位文件
查看源代码，鼠标移到开发工具窗口，按ctrl+p，输入链接地址的前几个字母，会自动联想显示所有符合条件的地址，点击打开即可。（有时第一次打开是空白内容，可再点击一次链接）
打开之后，如果是js内容，就可以直接在上面打断点调试，另外可以点击内容框的左下角大括号图标“{ }”(pretty print)，对代码进行排版美化。
4、编辑源代码
（1）【Console】下面输入框输入，不过按回车不是换行，会直接执行，如果有多行代码，需要在别的地方写好再粘贴进去。
（2）【Sources】下面，点击左上角第二行Sources旁边的“>>”打开Snippets，点击“+ New Snippet”新建一个文件编辑脚本，写完右键“Save”保存，再右键点击这个文件“Run”运行。
说明，如果是要覆盖页面js代码：
如果是函数，则是直接以相同的函数名称重写方法即可。
如果是要覆盖页面js代码的按钮事件，则需要重新注册该事件，否则相同的多个事件会全部响应。
$('#id').off().on(function() {
alert('test');
});
5、只分析异步请求资源
【Network】下面点击“XHR”，这样就只会显示XHR异步请求资源，以便于快速分析请求Headers和Response。