首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端必须知道的开发调试知识 - 笔记

,出于安全考虑,JavaScript 代码在上线时通常会被压缩,压缩的代码只有一行,变量使用’a’.'...答案是:通过在打包过程中生成 SourceMap 文件来对压缩的代码进行映射,从而可以调试时还原源码 SourceMap: mappings 字段存储了源文件和 SourceMap 的映射 英文,...Tools 中调试 Tips:没有 iPhone 设备可以 Mac AppStore 安装 Xcode 使用其内置的 ios 模拟器 # Android 使用 USB 数据线将手机与电脑相连...并允许调试 电脑打开 Chrome 浏览器,地址栏输入chrome://inspect/#devices 并勾选 Discover USB devices 选项 手机允许远程调试,并访问调试页面...可以使得 DevTools 中的所有更改(DOM、CSS、JS)持久化,并可以查看与原文件的差异(类似 git) CORS (跨域) 问题:通过 Whistle 开启代理,使用代理对真实请求地址进行封装和转发

1.1K20
您找到你想要的搜索结果了吗?
是的
没有找到

React Native程序调试

Warnings React Native程序运行时出现的Warnings也会被直接显示屏幕,以黄色的背景显示,并会打印出警告信息。...Resource 面板:用于查看当前页面所请求的资源文件,如 HTML,CSS 样式文件等。 Audits 面板:用于优化前端页面,加速网页加载速度等。...注:使用真机调试时,你需要确保你的手机和电脑处在同一个网段内。 Chrome调试小技巧 Sources面板 Sources 面板提供了调试 JavaScript 代码的功能。...断点Breakpoint 断点(Breakpoint) 是脚本中设置好的暂停处。DevTools中使用断点可以调试JavaScript代码,DOM更新和 network calls。...输入框中,输入一个可解析为真或假的表达式。仅当条件为真时,执行会在此暂停。 ? 附:React Developer Tools插件使用

3.6K60

React Native开发之调试

Warnings React Native程序运行时出现的Warnings也会被直接显示屏幕,以黄色的背景显示,并会打印出警告信息。...Resource 面板:用于查看当前页面所请求的资源文件,如 HTML,CSS 样式文件等。 Audits 面板:用于优化前端页面,加速网页加载速度等。...注:使用真机调试时,你需要确保你的手机和电脑处在同一个网段内。 Chrome调试小技巧 Sources面板 Sources 面板提供了调试 JavaScript 代码的功能。...断点Breakpoint 断点(Breakpoint) 是脚本中设置好的暂停处。DevTools中使用断点可以调试JavaScript代码,DOM更新和 network calls。...输入框中,输入一个可解析为真或假的表达式。仅当条件为真时,执行会在此暂停。 ? 附:React Developer Tools插件使用

3.8K80

React Native调试心得

Warnings React Native程序运行时出现的Warnings也会被直接显示屏幕,以黄色的背景显示,并会打印出警告信息。...Resource 面板:用于查看当前页面所请求的资源文件,如 HTML,CSS 样式文件等。 Audits 面板:用于优化前端页面,加速网页加载速度等。...真机调试 iOS 打开”RCTWebSocketExecutor.m “文件,将“localhost”改为你的电脑的ip,然后Developer Menu下单击”Debug JS Remotely...断点其实很简单 断点(Breakpoint) 是脚本中设置好的暂停处。DevTools中使用断点可以调试JavaScript代码,DOM更新和 network calls。...添加和移除断点 Sources 面板的文件导航面板中打开一个JavaScript文件来调试,点击边栏(line gutter) 为当前行设置一个断点,已经设置的断点处会有一个蓝色的标签,单击蓝色标签

5K70

React Native调试技巧与心得

Warnings React Native程序运行时出现的Warnings也会被直接显示屏幕,以黄色的背景显示,并会打印出警告信息。...Resource 面板:用于查看当前页面所请求的资源文件,如 HTML,CSS 样式文件等。 Audits 面板:用于优化前端页面,加速网页加载速度等。...真机调试 iOS 打开”RCTWebSocketExecutor.m “文件,将“localhost”改为你的电脑的ip,然后Developer Menu下单击”Debug JS Remotely...断点其实很简单 断点(Breakpoint) 是脚本中设置好的暂停处。DevTools中使用断点可以调试JavaScript代码,DOM更新和 network calls。...添加和移除断点 Sources 面板的文件导航面板中打开一个JavaScript文件来调试,点击边栏(line gutter) 为当前行设置一个断点,已经设置的断点处会有一个蓝色的标签,单击蓝色标签

6.7K50

Chrome 84 正式发布,支持私有方法、用户空闲检测!

支持私有方法 JavaScript 支持弱引用 安全更新 恢复 SameSite Cookie 的更改 4月,Chrome 暂时推迟了 SameSite Cookie 属性的推行,以确保 COVID...可以使用 navigator.wakeLock.request() 调起唤醒锁,并且结合 setTimeout 一段时间自动释放: // The wake lock sentinel. let wakeLock...下面这些场景很适合使用空闲检测: 聊天软件或在线社交网站可以使用此API来通知用户当前是否可以联系他们的联系人。 例如博物馆展示程序类的应用可以通过这个API来没有交互返回首页。...目前,控制台是网站开发者、库、框架和 Chrome 本身记录消息、警告和错误的中心位置。...它实质测量的是页面看起来可用的时间(因为其内容已呈现到屏幕),但实际不可用, 因为 JavaScript 阻止了主线程,因此页面无法响应用户输入

1.2K20

Appium移动测试入门指南(二) - Capability 配置

noReset/ fullReset 是否测试前后重置相关环境 unicodeKeyboard / resetKeyboard 是否需要输入非英文之外的语言并在测试完成测试完成重置输入法 dontStopAppOnReset... iOS 使用 Instruments 的 instruments -s devices 命令可返回一个有效的设备的列表。... Andorid 虽然这个参数目前已被忽略,但仍然需要添加上该参数 app 本地绝对路径或远程 http URL 所指向的一个安装包(.ipa,.apk,或 .zip 文件)。...默认值为 false true或false resetKeyboard 设定了 unicodeKeyboard 关键字的 Unicode 测试结束,重置输入法到原有状态。如果单独使用,将会被忽略。...默认是一个本地的欢迎页面 例如 https://www.github.com safariAllowPopups (仅支持模拟器)允许 javascript Safari 中创建新窗口。

2.6K00

移动端Web开发调试之Weinre调试教程

Weinre(WebInspector Remote)是一款基于Web Inspector(Webkit)的远程调试工具,借助于网络,可以PC直接调试运行在移动设备的远程页面,中文意思是远程Web...检查器,有了Weinre,PC可以即时修改目标网页的HTML/CSS/JavaScript,调试过程可实时显示移动设备上页面的预览效果,并同步显示设备页面的错误和警告信息,可以查看网络资源的信息,不过...Weinre也从最初的Java移植到了当前的JavaScriptGitHub搜索weinre的结果中前两个就是官方的Weinre项目。 ?...,例如我的页面放在本地环境并使用端口8888监听,所以移动端浏览器需要输入: 。...以后如果需要调试页面,打开页面,点击Debug书签就可以桌面环境开始调试了。

2.1K20

chrome插件手机上跑起来

创建一个chrome的插件,并让这个插件能够作为一个app,运行在终端设备。 创建一个chrome插件 该插件app实现一个搜索框,输入内容,根据输入内容去github搜索名称有关联的repositories 书写manifest.json 创建chrome...app的加载页面 书写加载页面的内容 使用chrome的扩展程序加载程序代码manifest.json chrome的app的配置文件有固定的形式,简单配置如下{ "manifest_version...由于入口是一个js文件,而实际我们是需要创建一个界面来展示数据和做一些交互,所以这里会借助chrome的一个api来实现这个功能,应用启动的时候,我们来创建一个页面出来 chrome.app.runtime.onLaunched.addListener...页面入口文件,这里贴出部分代码 Search !!!

64110

chrome插件在手机上跑起来

--more--> 创建一个chrome插件 该插件app实现一个搜索框,输入内容,根据输入内容去github搜索名称有关联的repositories 书写manifest.json 创建chrome...app的加载页面 书写加载页面的内容 使用chrome的扩展程序加载程序代码manifest.json chrome的app的配置文件有固定的形式,简单配置如下{ "manifest_version...由于入口是一个js文件,而实际我们是需要创建一个界面来展示数据和做一些交互,所以这里会借助chrome的一个api来实现这个功能,应用启动的时候,我们来创建一个页面出来 chrome.app.runtime.onLaunched.addListener...页面入口文件,这里贴出部分代码 Search !!!...//模拟机上运行 cca emulate ios //真机上运行 (开发者账号) cca run ios 如果更新了代码,需要重新执行如下命令 cca prepare 调试方式可以参考这里 而实际因为是

1.2K50

React Native调试方法

更进一步你可能想在添加新文件JavaScript包中时保持app运行新的版本,可以通过选择开发者菜单中的“Enable Hot Reloading”来打开。这可以让你在重载中保持app的状态。...你修改了原生代码(iOS的Objective-C/Swift或者Android中的Java/C++). 应用内的错误与警告提示(红屏和黄屏) 错误和警告会在开发构建时显示在你的app中。...你可以使用 console.error() 来手动触发一个。 警告(Warnings) 警告会在屏幕用黄色背景显示。这些警告条也叫YellowBox。点击警告条来显示更多信息或者让它们不显示。...你也可以使用快捷键(Mac为Command+Option+I,Windows为Ctrl+Shift+I)来访问开发者工具。...使用Chrome开发者工具设备上调试 iOS设备,打开 RCTWebSocketExecutor.m 文件并将“localhost”改为你电脑的IP,然后开发者菜单中选择“Debug JS Remotely

3.8K10

chrome插件手机上跑起来

--more--> 创建一个chrome插件 该插件app实现一个搜索框,输入内容,根据输入内容去github搜索名称有关联的repositories 书写manifest.json 创建chrome...app的加载页面 书写加载页面的内容 使用chrome的扩展程序加载程序代码manifest.json chrome的app的配置文件有固定的形式,简单配置如下{ "manifest_version...由于入口是一个js文件,而实际我们是需要创建一个界面来展示数据和做一些交互,所以这里会借助chrome的一个api来实现这个功能,应用启动的时候,我们来创建一个页面出来 chrome.app.runtime.onLaunched.addListener...页面入口文件,这里贴出部分代码 Search !!!...//模拟机上运行 cca emulate ios //真机上运行 (开发者账号) cca run ios 如果更新了代码,需要重新执行如下命令 cca prepare 调试方式可以参考这里 而实际因为是

68720

【Hybrid开发高级系列】ReactNative(二) —— React Native调试专题

更进一步你可能想在添加新文件JavaScript包中时保持app运行新的版本,可以通过选择开发者菜单中的“EnableHot Reloading”来打开。...▪ 你修改了原生代码(iOS的Objective-C/Swift或者Android中的Java/C++). 1.4 应用内的错误与警告提示(红屏和黄屏)         错误和警告会在开发构建时显示在你的...你可以使用console.error()来手动触发一个。 1.4.2 警告(Warnings)         警告会在屏幕用黄色背景显示。这些警告条也叫YellowBox。...log-android         你也可以通过iOS模拟器中访问Debug -> Open System Log… 或者Androidapp设备或者模拟器运行时终端中运行adb logcat...1.6.1 使用Chrome开发者工具设备上调试         iOS设备,打开RCTWebSocketExecutor.m文件并将“localhost”改为你电脑的IP,然后开发者菜单中选择

28720

Chrome 86 重要更新解读

更醒目的 HTTP 安全警告 我们访问 HTTPS 网页时,地址栏最左侧会显示一个锁定图标来表明当前网站是安全的,但如果 HTTPS 网页中嵌入的是并不安全的 HTTP 表单,浏览器则不会给出任何提示信息...如果你无视提示警告继续提交表单信息,则会看到一个确认警告页面,告知你即将提交的信息并不安全。 ?...后台标签页更省电 如果一个标签页在后台运行了五分钟以上,这个页面就会被暂时冻结,相应的 CPU 使用也会被限制 1% 左右;如果页面支持自动刷新,唤醒时间被限制每一分钟一次。...WebHID API,提供了通过JavaScript访问这些设备的方法。这会大大便利web游戏的操作性,可以使用摇杆、手柄、传感器、震动反馈等等设备。...使用API之前,需要先请求许可,第一次请求时会向用户弹窗。

1.1K20

学会前端调试技巧,提升排错效率

) iPhone 使用 Safari 浏览器打开要调试的页面 Mac 打开 Safari 浏览器调试(菜单栏 —> 开发 -> iPhone 设备名 -> 选择调试页面) 弹出的 Safari...Developer Tools 中调试 没有 iPhone 设备可以 Mac App Store 安装 Xcode 使用其内置的 iOS 模拟器 iPhone 使用 USB 数据线将手机与电脑相连...手机进入开发者模式,勾选 USB 调试,并允许调试 电脑打开 Chrome 浏览器,地址栏输入: chrome://inspect/#devices 并勾选 Discover USB devices...为了解决这个问题,我们可以使用 Overrides 保存线上修改文件,并能清晰看出改动了哪些地方,最后修改代码也方便。 ?...允许授权 page 中修改代码,修改完成 command + s 保存。

1.2K10

自动化-Appium-第一个Demo-Web(Java版)

将模拟器打开,打开PC的Chrome浏览器,输入访问地址chrome://inspect/ 如图所示,可以检测到udid为192.168.113.101:5555的模拟器 udid为192.168.113.101...连接真机,打开PC的Chrome浏览器,输入访问地址chrome://inspect/ 如图所示,可以检测到udid为MYV0215825000026的真机 udid为MYV0215825000026...方式二:通过ios_webkit_debug_proxy工具 首先将模拟器的Safari打开,之后访问百度首页; 之后Mac打开终端,输入启动代理命令 ios_webkit_debug_proxy...例如:模拟器 此时检测到模拟器打开的Webview页面,例如百度首页 选中,鼠标右键点击转到…… 打开选中的页面,将Chrome的开发者工具打开,显示html源码信息,则可以获取相应的Webview...方式二:通过ios_webkit_debug_proxy工具 首先将真机上的Safari打开,之后访问百度首页; 之后Mac打开终端,输入启动代理命令 ios_webkit_debug_proxy

2.1K10

一款前端性能分析工具—WebPageTest

这是一个在线的免费性能评测网站,支持IE,Chrome使用真正的浏览器(IE和Chrome)和真实的消费者连接速度,从全球多个地点运行免费网站速度测试。...(因此一个文件可以节省30%的大小,通过压缩即产生了源文件70%大小的文件) Compress Images 适用对象:JPEG图片 检查内容:对比使用photoshop质量选择为50文件大小,尺寸超出...10%为达标,10%~50%为警告,超出50%为不达标,总体评分为图片重压缩占原文件的百分比 Use Progressive JPEGs 适用对象:所有JPEG图片 检查内容:检查每个JPEG图片文件并计算分数...当过期时间设置小于30天,将评定为警告 Use A CDN 适用对象:所有静态的非HTML内容(css, js 以及图片) 检查内容:检查是否托管一个已知的CDN(CName映射到一个已知的CDN网络...).超过整体页面80%为静态资源时,则需要考虑使用CDN,将静态资源托管CDN,你可以从这里知道当前已知的CDN 用一个例子来看WebPageTest的具体分析数据 使用很简单,数据分析也不需要给出更多说明

1.1K50
领券