web浏览器调试

一、chrome浏览器

01 css、html的调试

1.ctrl+shift+c 可选择页面上的元素节点

2.选中节点后可以 F2 直接编辑html

3.添加类名功能,新建类名样式功能

4.隐藏元素功能

02 js调试

在sources页面里进行操作

<1>断点后的执行包括

1.不进入函数内部的下一步

2.进入函数内部的下一步

3.跳出当前函数

4.不激活断点/激活断点,可通过打对勾来减少断点,也可以右键删除断点

<2>打印异常

点击,并选择在异常位置暂停后,js会在在异常的位置停止执行并打印错误

若不选择在异常位置暂停,则会继续执行,但会打印错误

<3>ctrl+shift+f 在所有文件里查找

<4>点击对应js文件下的{}可以格式化压缩的js

03事件监听的调试

先选中被监听元素,打开sources选项 选择右侧的Event Listener Breakpoints,其中mouse里有click等一系列事件,点击后即在触发事件时断点生效

时间: 2024-10-29 19:07:36

web浏览器调试的相关文章

在GOOGLE浏览器中模拟移动浏览器 调试Web app

在此记录下,以便在今后的工作中用到. 首先通过F12 or Ctrl+Shift+i,打开开发者工具,点击开发者工具面板的 (show  drawer)按钮,出现如下图所示的面板: 切换至Emulation选项卡中,在这里我们就可以自由地模拟各种各样的移动浏览器了,该功能支持了包括iPhone.ipad.google nexus系列等机型.   感兴趣的同学赶紧去试试吧.你会发现chrome是最好的web app开发利器.   温馨提示:需要在chorme 32版本后,才有些设置哦.   最后还

移动端Web开发调试之Chrome远程调试(Remote Debugging)

本篇主要说一下Chrome RemoteDebugging 的方法,之前也遇到一些坑,自己总结了一些经验,分享如下. Chrome DevTools调试移动设备Brower Page Tabs/WebViews 安卓远程调试目前支持所有操作系统(Windows,Mac, Linux, and Chrome OS.)中调试,支持: ● 调试站点的页面 ● 调试安卓原生App中的WebView ● 实时将安卓设备的屏幕图像同步显示到开发机器. ● 通过端口转发(port forwarding)与虚拟

安卓手机移动端Web开发调试之Chrome远程调试(Remote Debugging)

一.让安卓打debug模式的apk包 二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调试处处是alert的,这估计是最常用的办法了.以前很多时候为了预览页面在移动设备上的效果,需要先将页面上传到测试服务器,再将url输入到设备浏览器,或者使用第三方二维码扫码应用,通过移动设备访问打开浏览实际效果,每次换设备都要重复这些操作,页面多的话这些繁琐的事情就特别让人厌烦了.移动互联网的浪潮,

MyEclipse使用教程:Linux Internal Web浏览器的兼容性

MyEclipse特性与Linux内部web浏览器的兼容性问题 Eclipse 3.3现在支持所有平台上的Mozilla浏览器(对Mozilla的迟滞无处不在),对于无处不在的Mozilla更多信息:详见bug#7923.对于MyEclipse的Linux用户来说,这就意味着附带的MyEclipse 6.0嵌入的Mozilla浏览器核心可以作为Eclipse平台的核心浏览器,随着附带的MyEclipse 6.0嵌入的Mozilla浏览器核心需要MyEclipse的特性如下: 需要嵌入MyEcli

使用weinre通过PC浏览器调试手机网页

Weinre是什么? Weinre代表Web Inspector Remote,是一种远程调试工具.举个例子,在电脑上可以即时的更改手机上对应网页的页面元素.样式表, 或是查看Javascript变量,同时还可以看到手机上页面的错误和警告信息. Weinre作为一种远程调试工具,在结构上分为三层: 目标页面(target):被调试的页面,页面已嵌入weinre的远程js,下文会介绍: Debug客户端(client):本地的Web Inspector调试客户端: Debug服务端(agent):

SeaJS:一个适用于 Web 浏览器端的模块加载器

什么是SeaJS?SeaJS是一款适用于Web浏览器端的模块加载器,它同时又与Node兼容.在SeaJS的世界里,一个文件就是一个模块,所有模块都遵循CMD(Common Module Definition)规范.SeaJS本身遵循(Keep it Simple, Stupid)理念开发,API仅有几个. 为什么用SeaJS?假如我们要开发一个web应用App,在这个应用中需要使用jquery框架.App的首页index.html会用到module1.js,module1.js依赖module2

【转】手机web前端调试页面的几种方式

前言 PC端web页面调试比较容易,这里主要说几种移动端调试的方法,从简单到复杂.从模拟调试到远程调试,大概分为几部分: 1.Chrome DevTools(谷歌浏览器)的模拟手机调试 2.weinre(web inspector remote)远程调试工具 3.微信的“web开发者工具”,集成了Chrome DevTools和weinre,做的比较好 4.Chrome DevTools远程调试Android和iOS页面 5.Eruda——手机网页前端调试面板 阅读说明 本文不是小白文,需要一定

JavaScript权威指南第13章 web浏览器中的javascript

13.1 客户端javascript window对象是所有的客户端javascript特性和api的主要接入点.表示浏览器的一个窗口,可以通过window对象来引用它. window 的方法 alert() prompt() confirm() 13.2 在html里嵌入javascript 4种方法: 内联:放置在<script></script>标签之中 外部引入:<script src="   "></script> html程序

专题四:自定义Web浏览器

前言: 前一个专题介绍了自定义的Web服务器,然而向Web服务器发出请求的正是本专题要介绍的Web浏览器,本专题通过简单自定义一个Web浏览器来简单介绍浏览器的工作原理,以及帮助一些初学者揭开浏览器这层神秘的面纱(以前总感觉这些应用感觉很深奥的,没想到自己也可以自定义一个浏览器出来),下面不啰嗦了,进入正题. 一.Web浏览器的介绍 Web浏览器是指可以显示Web服务器或者本地文件系统中的Html文件内容,并让用户与这些文件交互的一种软件,它是网络服务的客户端浏览程序,可向Web服务器发送请求,