谷歌浏览器浏览网页时怎么修改js

Posted 2023-05-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了谷歌浏览器浏览网页时怎么修改js相关的知识，希望对你有一定的参考价值。

首先我们打开开发者工具，你可以直接在页面上点击右键，然后选择审查元素或者在Chrome的工具中找到或者你直接记住这个快捷方式： Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台)，或者直接按F12。

打开的开发者工具就长下面的样子，建议大家将开发者工具弹出作为一个独立的窗口：

1、Elements标签页
这个就是查看、编辑页面上的元素，包括html和CSS：

左侧就是对页面HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性，或者你点右键选;Edit as Html;直接对元素的HTML进行编辑，或者删除某个元素，所有的修改都会即时在页面上得到呈现。（注：看到上面右键菜单的最后一个选项;审查元素了么？这是不是说明这个开发者工具的页面也是HTML来的呢？你点一下就知道了哦，嘿嘿）
你还可以对某个元素进行监听，在JS对元素的属性或者HTML进行修改的时候，直接触发断点，跳转到对改元素进行修改的JS代码处：

Elements标签页的右侧可以对元素的CSS进行查看与编辑修改：

你还可以通过这里看到各CSS选择器设置的CSS值的覆盖情况。
下面的Metrics可以看到元素占的空间情况（宽、高、Padding、Margin）

注意到上面的Properties没有？这个很有用哦，可以让你看到元素具有的方法与属性，比查API手册要方便得多哦（要注意某些方法和属性在IE、FireFox等其他浏览器下面的支持情况哦）。
2、Resources标签页

Resources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容，同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除。
这里的CSS文件有一个好玩的特性，你可以直接修改CSS文件，并且修改即时生效哦：

3、Network标签页

Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用，特别是在查看Ajax类请求的时候，非常有帮助。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示的哦。
点击左侧某一个具体去请求URL，可以看到该请求的详细HTTP请求情况：

我们可以在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息，对于开发、调试，都是很有用的。
4、Scripts标签页
很明显，这个标签页就是查看JS文件、调试JS代码的，直接看下图的说明：

还有你可以打开javascript控制台，做一些其他的查看或者修改：

你甚至还可以为某一XHR请求或者某一事件设置断点：

5、Timeline标签页
注意这个Timeline的标签页不是指网络请求的时间响应情况哦（这个在Network标签页里查看），这个Timeline指的JS执行时间、页面元素渲染时间：

点击底部的Record就可以开始录制页面上执行的内容。
6、Profiles标签页
这个主要是做性能优化的，包括查看CPU执行时间与内存占用：

7、Audits标签页
这个对于优化前端页面、加速网页加载速度很有用哦（相当与Yslow）：

点击run按钮，就可以开始分析页面，分析完了就可以看到分析结果了

它甚至可以分析出页面上样式表中有哪些CSS是没有被使用的哦：

8、Console标签页
就是Javascript控制台了：

这个除了查看错误信息、打印调试信息（console.log()）、写一些测试脚本以外，还可以当作Javascript API查看用。
例如我想查看console都有哪些方法和属性，我可以直接在Console中输入;并执行：

怎么样，一目了然了吧？再例如我想查看日期函数都有哪些方法：

（注：注意在这里看到的某些方法和属性是ES5新增的，记得兼容其他浏览器的支持情况哦）参考技术A

Chrome拦截浏览器网页中的JS代码,修改替换并运行

js修改浏览器历史

参考技术A

1.js中历史网页中怎么把上一个页面换成另一个页面

js是没有更改浏览历史url和获取从上一页开的url地址的，您可以使用window.location.replace(url)；来重置浏览历史，

window.location.replace不在浏览器中保存跳转前的网址，因此按返回键将无效；

例子：

有 3个jsp页面（1.jsp, 2.jsp, 3.jsp），进系统默认的是1.jsp ，当我进入2.jsp的时候， 2.jsp里面用window.location.replace("3.jsp")；与用window.location.href("3.jsp")；从用户界面来看是没有什么区别的，但是当3.jsp页面有一个“返回”按钮，调用 window.history.go(-1);wondow.history.back（)；方法的时候，一点这个返回按钮就要返回2.jsp页面的话，区别就出来了，当用window.location.replace("3.jsp")；连到3.jsp页面的话，3.jsp页面中的调用 window.history.go(-1);wondow.history.back（)；方法是不好用的，会返回到1.jsp 。当用window.location.href("3.jsp")；连到3.jsp页面的话，3.jsp页面中的调用 window.history.go(-1);wondow.history.back（)；方法是好用的，会返回2.jsp。因为window.location.replace("3.jsp")；是不向服务器发送请求的跳转，而window.history.go(-1);wondow.history.back（)；方法是根据服务器记录的请求决定该跳到哪个页面的，所以会跳到系统默认页面1.jsp 。window.location.href("3.jsp")；是向服务器发送请求的跳转，window.history.go(-1);wondow.history.back（)；方法是根据服务器记录的请求决定该跳到哪个页面的，所以就可以返回到2.jsp。

2.javascript怎么设置history

history -- history用于窗体中的导航

history，中文"历史"

history对象是window对象的属性

浏览者通常可以使用浏览器的前进与后退按钮访问曾经浏览过的页面。JavaScript的history对象记录了用户曾经浏览过的页面，并可以实现浏览器前进与后退相似的导航功能

可以通过back函数后退一个页面，forward函数前进一个页面，或者使用go函数任意后退或前进页面，还可以通过length属性查看history对象中存储的页面数

history对象函数

JavaScript history.go（) 函数

说明：前进或后退指定的页面数

JavaScript history.back（) 函数

说明：后退一页

JavaScript history.forward（) 函数

说明：前进一页

history对象属性

JavaScript length 属性 --history对象中缓存了多少个URL

示例

history.length;

3.如何修改浏览器的JavaScript选项

在IE8里（不知IE6或IE7是否一样，不过大体上是差不多的）1.进入“Inter选项”如果不知道怎么进入，打开IE，按住键盘的“Alt”键（就在空格键的旁边）然后会看到“地址栏”的上面或下面会出现一个菜单栏，里面有：文件、编辑、查看等选项。

单击“工具”那里，然后在弹出来的下拉菜单里，单击“Inter选项”2.进入“Inter选项”后，会看到一个大框，注意看最上面，会发现这样几个选项卡：常规、安全、隐私、内容。单击“安全”，会看到，下方的内容改变了3.通过刚才那步进入了“安全”选项卡之后，先确保是“Inter”这一项被选中（就是那个“地球”），然后把注意力转到下方。

在最下面，有三个按钮：确定、取消和应用。在它们上面，可以找到一个名叫：“自定义级别”的按钮，单击它。

4.又一个框弹出来了，可以看到有一堆设置。把竖着的那个滚动条慢慢往下拽，直到找到“脚本”这一选项，它的位置应该是在中间偏上，在ActiveX选项的下面。

（这一步要有点耐心，未必能一下就找到的）5.再把滚动条稍微往下拽一点，看到有一项叫做：“活动脚本”。它下面有一个单选框，有这样三种选择：禁用、启用、提示。

单击“启用”。然后点整个框框最下面的“确定”。

然后再点“Inter选项”框的“确定”。应该就OK了如果还有哪里说的不太明白，您就在问题补充里再提出来吧，如果满意的话，要给分哦，谢谢您了。