天道酬勤,学无止境

如何在 Firebug 中启用源映射支持?(How do I enable source map support in Firebug?)

问题

我已经使用 Chrome 有一段时间了,您必须在选项中明确启用源映射支持。

我现在正在使用 Firebug 在 Firefox 中测试一些东西,但我没有看到我的原始源文件 - 只是生成的包。

有没有办法在 Firebug 中启用源映射支持? 我在 Firefox 27.0.1 中使用 Firebug 1.12.8。

回答1

Firebug 尚不支持源映射(从 2.0.* 开始)。

对于 JavaScript 的源映射支持和 CSS 的问题 5961,您可能需要关注问题 5765。

Firebug 3 将集成到 Firefox 的内置 DevTools 中,后者已经具有此功能。 因此,Firebug 3 也将具有该功能。 开发版本可在 getfirebug.com 上获得。

更新

Firebug 从 Firefox 48 开始合并到 Firefox DevTools。

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • TypeScript基本操作,配置文件tsconfig.json详解,vscode和HBuilderX基本配置
    Node 基本命令 npm安装依赖 【npm install xxx】利用 npm 安装xxx依赖到当前命令行所在目录 【npm install xxx -g】利用npm安装全局依赖xxx 【npm install xxx –save】 安装并写入package.json的”dependencies”中 【npm install xxx –save-dev】安装并写入package.json的”devDependencies”中 npm删除依赖 【npm uninstall xxx】删除xxx依赖 【npm uninstall xxx -g】删除全局依赖xxx VScode中使用ts 1. 基本配置:安装Node后,在终端安装typescript, 1.安装到当前项目和安装到全局 npm i typescript //安装到当前目录 npm i typescript -g //安装到全局 2. 安装配置文件tsconfig.json 执行之后自动生成一个 .json配置文件 tsc --init //自动生成一个配置文件tsconfig.json 3.配置文件tsconfig.json基本设置 “outDir”: “./”, / Redirect output structure to the directory.(将输出结构重定向到目录) /转换为js的目录 ----------
  • 如何使用Compass(SASS)使CSS Sourcemapping在Chrome中工作(How to make CSS sourcemapping work in Chrome with Compass (SASS))
    问题 事实是,我正在尝试使CSS映射与Chrome(v38,OS X)中的Compass项目一起使用,因此它无需重新加载页面即可重新加载我的CSS。 我遵循了这个https://developer.chrome.com/devtools/docs/css-preprocessors以及http://www.sitepoint.com/using-source-maps-debug-sass-chrome/ 我已经完成了Compass项目,并且正在使用compass watch编译。 在Config.rb我添加了sourcemap = true并且.map文件已成功创建。 加载网站时,我可以在控制台的“网络”选项卡中看到加载的.map文件(状态码为200) Chrome的“设置”中也Enable CSS source maps并且Auto-reload generated CSS 。 但是,当我重新编译CSS时,更改不会出现在DevTools或页面中。 但是,当我重新打开DevTools时,可以在“样式”选项卡中看到更改,但这些更改未应用到页面中。 因此,总结一下: 我没有Compass编译等问题。 .map文件通过200响应通过我的HTTP服务器进行编译和加载我可以在例如样式检查器中看到.scss引用。 body {...} style.scss:18因此Chrome与我的
  • 来源地图可用于Chrome扩展程序吗?(Do source maps work for Chrome extensions?)
    问题 我正在使用Closure编译器来创建Chrome扩展程序,并且希望使源映射可以用于调试。 通过将浏览器直接指向源树中的页面,并在编译后的javascript文件的末尾添加特殊的sourceMappingURL(所有内容都在一个目录中),我可以使源映射正常工作: debugger;document.getElementById("hello").innerHTML="Hello, world!"; //@ sourceMappingURL=background-compiled.map 但是,当我访问与扩展相同的脚本时,只能看到编译的javascript,而看不到原始源代码。 我确实将Chrome调试器配置为在两种情况下均启用源映射,否则它们都将以相同的方式执行且没有错误。 源映射是否仅在扩展中不起作用,或者在设置方面缺少我的东西? 我尝试过Chrome 25 stable和Chrome 27 canary,两者的行为相同。 回答1 我知道我迟到了,但是Chrome确实允许源地图。 您可能遇到的问题是,它默认情况下拒绝加载地图。 可以通过将地图添加到manifest.json文件中的web_accessible_resources来解决此web_accessible_resources 。 回答2 本着为评论中解决的问题提供答案的精神
  • DPDK快速上手指南(18.02)
    DPDK快速上手(linux) 本文档主要来自linux_gsg-18.02.pdf的翻译,翻译肯定有不妥之处,请批评指正,我会随后修改,不胜感激。 1. 介绍 本文档包含有关DPDK(Data Plane Development Kit的缩写)软件的安装和配置的说明,目的就是让用户快速用起来。本文档描述怎样在linux应用环境下编译和运行一个DPDK应用程序,而不过多深入细节。 1.1文档路线图 以下是针对所有DPDK文档建议的阅读顺序: 发布说明(Release Notes):提供具体的发布信息,包括支持特性、限制、问题改进、问题报告等等。也提供以FAQ形式的常见问题的回答。 快速上手指南(Getting Started Guide),即本文档:描述在不同的操作系统上如何安装和配置DPDK软件;帮助用户快速用起来。 编程者指南(programmer's guide): 描述: 软件架构和怎么用它(通过例子),特别是在linux应用环境下。 DPDK的内容,系统构建(包括用在DPDK根目录 Makefile中的命令,用来构建开发工具包和应用程序)以及移植应用程序的准则。 软件中使用的优化以及新开发应考虑的优化。 还提供术语表。 API参考(API Reference): 提供有关DPDK函数、数据结构和其它编程结构的详细信息。 示例应用程序用户指南(sample
  • 如何使用源映射查找缩小错误(How to use source map to find minification error)
    问题 我使用 Angular 和 RequireJS。 我尝试使用 RequireJS 优化,现在我的应用程序无法正常工作。 我确定这是由于缩小。 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.0rc1/$injector/modulerr?p0=myapp&p1=Error%3…t%20(http%3A%2F%2Flocalhost%3A8080%2Fwebapp%2Fapp%2Fmain-built.js%3A4%3A10) 错误信息对发现问题不是很有帮助,所以我想知道如何使用源映射来查明原始源代码中的错误。 我使用 Chrome 进行调试。 编辑:完整的错误堆栈跟踪 Failed to instantiate module myapp due to: Error: [$injector:unpr] http://errors.angularjs.org/1.2.0rc1/$injector/unpr?p0=e at Error (<anonymous>) at http://localhost:8080/webapp/app/main-built.js:3:19581 at http://localhost:8080/webapp/app/main-built.js:3:31899
  • 配置Webpack允许浏览器调试(Configure webpack to allow browser debugging)
    问题 我是webpack的新手,我正在转换现有的Web应用程序以使用它。 我正在使用webpack捆绑并缩小我的JS,这在部署时很棒,但是这使得在开发过程中进行调试非常困难。 通常,我使用chrome的内置调试器来调试JS问题。 (或Firefox上的Firebug)。 但是,对于webpack来说,所有内容都填充在一个文件中,使用该机制进行调试变得非常困难。 有没有一种方法可以快速打开和关闭捆绑? 或打开和关闭缩小? 我已经看过是否有一些脚本加载器配置或其他设置,但是它看起来并不明显。 我还没有时间将所有内容转换为模块和使用需求。 因此,我只需使用require(“ script!./ file.js”)模式进行加载。 回答1 您可以使用源映射来保留源代码与捆绑/缩小的源代码之间的映射。 Webpack提供了devtool选项来增强开发人员工具中的调试功能,只需为您创建捆绑文件的源映射即可。 可以从命令行使用此选项,也可以在webpack.config.js配置文件中使用此选项。 在下面,您可以找到一个使用命令行的人为示例,以生成捆绑文件( bundle.js )以及生成的源映射文件( bundle.js.map )。 $ webpack --devtool source-map ./entry.js bundle.js Hash: b13b8d9e3292806f8563
  • 如何为Android支持库启用javadoc?(How can I enable javadoc for the Android support library?)
    问题 使用Android支持库进行兼容性时,尝试查看FragmentTransaction的javadoc时,由于没有相关的javadoc文件,因此出现以下错误: android.support.v4.app.FragmentTransaction 注意:该元素既没有附加源,也没有附加Javadoc,因此找不到Javadoc。 支持库添加在项目属性中的“ Android Dependencies”(Android依赖项)下,并显示Javadoc位置:(无)-不可修改,如下所示。 有什么解决方法吗? 回答1 我在包视图的Android Dependencies部分中将android-support-v4.jar捆绑在一起。 我有一堂课 public class CountriesFragment extends ListFragment {...} 和进口 import android.support.v4.app.ListFragment; 之上 我在libs文件夹中创建了一个文件android-support-v4.jar.properties 。 它包含以下几行: doc=c:\\[path-to-android-sdk]\\docs\\reference src=C:\\[path-to-android-sdk]\\extras\\android\\support\\v4\
  • 如何在Visual Studio代码中调试打字稿文件(how to debug typescript files in visual studio code)
    问题 使用Visual Studio代码的0.3版,我不确定如何启用Sourcemap和调试ts文件 我收到以下错误can't launch program '/Projects/app-server/server.ts'; enabling source maps might help can't launch program '/Projects/app-server/server.ts'; enabling source maps might help 如何启用Sourcemap和TypeScript调试。 在我的Sourcemap中设置为true tsconfig.json { "compilerOptions": { "target": "ES5", "module": "commonjs", "sourceMap": true } } launch.json { "version": "0.1.0", // List of configurations. Add new configurations or edit existing ones. // ONLY "node" and "mono" are supported, change "type" to switch. "configurations": [ { // Name of configuration
  • 如何在jBoss中启用CORS(How to enable CORS in jBoss)
    问题 我正在开发一个HTML5应用程序,该应用程序必须从旧版Web服务(Jax-Ws)中获取一些值,因此我使用jQuery.soap来查询这些Web服务以获得响应。 我已经使用SOAP UI尝试了请求的正确性,并且它们可以正常工作。 从我的HTML5客户端,我无法从服务器接收SOAP响应,因为在响应中,没有将Allow-Control-Allow-Origin标头设置为*。 因此,请求的来源被识别为不允许,并且服务器的响应是错误响应。 使用Firebug + Firefox调试我的HTML5项目时,错误消息为: 跨源请求已锁定:源处的标准不允许读取远程资源。 您可以通过将资源移至同一域或激活CORS来解决问题。 如何在jBoss中启用CORS? 回答1 您需要处理旧版Web服务才能解决此问题。 正如上面的mccannf所说,您需要在web.xml中添加CORS过滤器。 您可以使用来自transactioncompany的解决方案: web.xml: <filter> <filter-name>CORS</filter-name> <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class> </filter> <filter-mapping> <filter-name>CORS</filter-name
  • ESRI:无法解析源地图(ESRI : Failed to parse source map)
    问题 我在Google chrome开发者控制台中收到此错误。 无法解析SourceMap:http:// localhost:15132 / Scripts / _External / igniteui / css / themes / infragistics / infragistics.theme.css.map 我如何解决它? 回答1 Chrome最近在开发人员工具中添加了对源地图的支持。 如果您进入chrome开发人员工具栏上的设置,则可以看到以下两个选项: 0 如果您禁用了这两个选项,并刷新了浏览器,它将不再要求提供源映射。 这些设置可以在这里找到: 0 回答2 虽然选择的答案是隐藏错误的好答案,但它并不能使错误消失,只是您无法在检查器中看到它。 另一种方法是下载缺少的地图文件,并将其放在assets / lib目录中。 因此,例如,我缺少了angular-route.min.js.map文件,而我去了这里https://code.angularjs.org/1.5.3/(到angular的正确版本)并下载了丢失的文件。 该错误并没有立即消失,可能是由于缓存所致,但是一旦我在浏览器中访问了实际文件,它便开始起作用。 http://sitename.localhost/assets/lib/angular-route.min.js.map 。 现在,即使启用了源映射
  • ES 10 - 如何使用Elasticsearch的索引模板(index template)
    Elasticsearch的索引模板就是将已经创建好的某个索引参数设置(settings)和索引映射(mapping)保存下来作为模板, 在下次创建新索引时, 就可以直接指定使用某个模板中定义好的设置和映射. 本篇博文介绍索引模板的使用方法, 以及实践建议. 目录 1 什么是索引模板1.1 索引模板中的内容 1.2 索引模板的用途 2 创建索引模板 3 查看索引模板 4 删除索引模板 5 模板的使用建议5.1 一个index中不能有多个type 5.2 设置_source = false 5.3 设置_all = false 5.4 设置dynamic = strict 5.5 使用keyword类型 参考资料 版权声明 1 什么是索引模板 索引模板: 就是把已经创建好的某个索引的参数设置(settings)和索引映射(mapping)保存下来作为模板, 在创建新索引时, 指定要使用的模板名, 就可以直接重用已经定义好的模板中的设置和映射. 1.1 索引模板中的内容 (1) settings: 指定index的配置信息, 比如分片数、副本数, tranlog同步条件、refresh策略等信息; (2) mappings: 指定index的内部构建信息, 主要有: ① _all: All Field字段, 如果开启, _all字段就会把所有字段的内容都包含进来
  • 如何调试JavaScript代码? [关闭](How can I debug my JavaScript code? [closed])
    问题 关门了。 这个问题需要更加集中。 它当前不接受答案。 想要改善这个问题吗? 更新问题,使其仅通过编辑此帖子即可将重点放在一个问题上。 4年前关闭。 改善这个问题 当我发现自己的代码段有问题时,应该如何进行调试? 回答1 Firebug是用于此目的的最受欢迎的工具之一。 回答2 所有现代浏览器都带有某种形式的内置JavaScript调试应用程序。 这些的详细信息将在相关技术网页上介绍。 我个人最喜欢调试JavaScript的是Firefox中的Firebug。 我并不是说Firebug比其他任何一个都要好。 这取决于您的个人喜好,无论如何,您可能应该在所有浏览器中测试您的网站(我个人的首选始终是Firebug)。 我将以Firebug为例介绍以下一些高级解决方案: 火狐浏览器 Firefox带有自己的内置JavaScript调试工具,但我建议您安装Firebug插件。 这提供了一些方便的基于基本版本的附加功能。 我只在这里谈论Firebug。 安装Firebug后,您可以按以下方式进行访问: 首先,如果您右键单击任何元素,则可以使用Firebug检查元素: 单击此按钮将在浏览器底部打开Firebug窗格: Firebug提供了多种功能,但我们感兴趣的功能是脚本选项卡。 单击脚本选项卡将打开以下窗口: 显然,要调试,您需要单击reload : 现在
  • 什么是TypeScript映射文件?(What is a TypeScript Map file?)
    问题 我已经看到TypeScript的.map文件。 我想知道的是这些文件的用途。 它们是否包含对.ts文件中引用的其他文件的引用? 回答1 .map文件是源映射文件,可让工具在发出的JavaScript代码和创建它的TypeScript源文件之间进行映射。 许多调试器(例如Visual Studio或Chrome的dev工具)可以使用这些文件,因此您可以调试TypeScript文件而不是JavaScript文件。 这是某些缩小器和其他编译为JS的语言(如CoffeeScript)所产生的相同的源映射格式。 回答2 源映射基本上就是它所说的,是一种语言到另一种语言的映射,因此调试器可以运行JavaScript代码,但向您显示实际生成它的行。 出于实际调试目的: 源映射允许您执行的操作是在TypeScript文件上设置一个断点,然后调试代码。 这可以在Chrome和Firefox中完成。 令人困惑的是,Chrome中的调试器行为是:达到断点时,实际上会显示“ .js”文件(在断点处停止)。 从今天开始,Firefox调试器将在中断时显示实际的TypeScript文件。 请参阅以下参考: http://www.gamefromscratch.com/post/2014/05/27/TypeScript-debugging-in-Visual-Studio-with-IE-Chrome
  • 【OGG】OGG基础知识整理
    【OGG】OGG基础知识整理一、GoldenGate介绍 GoldenGate软件是一种基于日志的结构化数据复制软件。GoldenGate 能够实现大量交易数据的实时捕捉、变换和投递,实现源数据库与目标数据库的数据同步,保持亚秒级的数据延迟。 GoldenGate能够支持多种拓扑结构,包括一对一,一对多,多对一,层叠和双向复制等等。 GoldenGate基本架构 Oracle GoldenGate主要由如下组件组成 ● Extract ● Data pump ● Trails ● Collector ● Replicat ● Manager Oracle GoldenGate 数据复制过程如下: 利用抽取进程(Extract Process)在源端数据库中读取Online Redo Log或者Archive Log,然后进行解析,只提取其中数据的变化信息,比如DML操作——增、删、改操作,将抽取的信息转换为GoldenGate自定义的中间格式存放在队列文件(trail file)中。再利用传输进程将队列文件(trail file)通过TCP/IP传送到目标系统。 目标端有一个进程叫Server Collector,这个进程接受了从源端传输过来的数据变化信息,把信息缓存到GoldenGate 队列文件(trail file)当中,等待目标端的复制进程读取数据。 GoldenGate
  • 如何使用JavaScript源地图(.map文件)?(How to use JavaScript source maps (.map files)?)
    问题 最近,我看到一些JavaScript库(例如Angular)附带了带有.js.map扩展名的文件,这在我脑海中引发了几个问题: 这是为了什么? 为什么Angular的.js.map关心传递.js.map文件? 我(作为JavaScript开发人员)如何使用angular.min.js.map文件? 我应该关心为我的JavaScript应用程序创建.js.map文件吗? 如何创建? 我看了一下angular.min.js.map ,其中充满了格式奇怪的字符串,所以我认为它不是手动创建的。 回答1 .map文件适用于已缩小的js和css (现在也适用于ts )文件。 它们被称为SourceMaps。 当您缩小文件(例如angular.js文件)时,它将占用数千行漂亮的代码,并将其变成仅几行丑陋的代码。 希望在将代码交付生产时,您使用的是最小化的代码,而不是完整的,未最小化的版本。 当您的应用在生产中且出现错误时,源映射将帮助您获取丑陋的文件,并允许您查看代码的原始版本。 如果您没有源地图,那么任何错误充其量似乎都是神秘的。 CSS文件也一样。 一旦获取了SASS或LESS文件并将其编译为CSS,它看起来就不会像其原始形式一样。 如果启用了源贴图,则可以看到文件的原始状态,而不是修改后的状态。 因此,按顺序回答您的问题: 这是为了什么? 取消引用丑陋的代码开发人员如何使用它?
  • 我已经为Windows 7在IIS上启用了经典的asp支持,并且为经典的asp配置了IIS Web,但是.asp页面没有显示? [关闭](I have already enabled classic asp support on IIS for windows 7, and configured IIS web for classic asp,Yet .asp page is not being displayed? [closed])
    问题 关闭。 此问题不符合堆栈溢出准则。 它当前不接受答案。 想要改善这个问题吗? 更新问题,使它成为Stack Overflow的主题。 7年前关闭。 改善这个问题 我的.asp页位于名为“ MyWeb”的文件夹中,而“ MyWeb”文件夹位于inetpub下的wwwroot文件夹下。 我还在IIS管理器中为.asp将MIME类型添加为application / asp,对于.aspx将MIME类型添加为application / aspx,我尝试了很长时间,但仍然无法正常工作。 当我打开该.asp文件时,它要求在IE浏览器中下载并在Mozilla Firefox中显示空白页面。 请任何人告诉我如何解决这个问题? 答案= 问题解决了,我只是将IIS管理器中的设置更改为true,将“将父路径设置为true”并将“将错误发送到浏览器”设置为true。 显示IIS的Localhost主页,我的asp脚本也正在运行。 回答1 可能您没有在IIS中安装Classic ASP支持。 为此,请在Windows 7中执行以下步骤; 如何在Windows 7的IIS上启用经典ASP支持 安装经典ASP支持 转到Control Panel -> Programs and Features 从左侧导航栏中选择 从“ Windows Features对话框中,展开“ Internet
  • 【OGG】OGG基础知识整理
    【OGG】OGG基础知识整理一、GoldenGate介绍GoldenGate软件是一种基于日志的结构化数据复制软件。GoldenGate 能够实现大量交易数据的实时捕捉、变换和投递,实现源数据库与目标数据库的数据同步,保持亚秒级的数据延迟。GoldenGate能够支持多种拓扑结构,包括一对一,一对多,多对一,层叠和双向复制等等。 GoldenGate基本架构 Oracle GoldenGate主要由如下组件组成● Extract● Data pump● Trails● Collector● Replicat● ManagerOracle GoldenGate 数据复制过程如下:利用抽取进程(Extract Process)在源端数据库中读取Online Redo Log或者Archive Log,然后进行解析,只提取其中数据的变化信息,比如DML操作——增、删、改操作,将抽取的信息转换为GoldenGate自定义的中间格式存放在队列文件(trail file)中。再利用传输进程将队列文件(trail file)通过TCP/IP传送到目标系统。目标端有一个进程叫Server Collector,这个进程接受了从源端传输过来的数据变化信息,把信息缓存到GoldenGate 队列文件(trail file)当中,等待目标端的复制进程读取数据。 GoldenGate 复制进程
  • 如何在Chrome Devtools中使SASS编辑工作?(How can I make SASS editing work in Chrome Devtools?)
    问题 我只是按照此tutplus教程中的源地图sass进行操作。 我无法在Chrome的inspect元素下的“实验”标签中找到“支持sass”选项。 它被删除了吗? 我迟到不能使用此功能了吗? 我的Sass版本是3.3.8(Maptastic Maple) 如何在Chrome Devtools中使SASS编辑工作? 回答1 我成功了 SASS支持不再是一个实验:它现在是一个标准。 我只是按照简单的步骤使其工作。 1)在chrome上打开您的检查元素,然后点击右上角出现的齿轮图标。 2)启用CSS源映射(我认为默认情况下已启用它。如果不只是检查它,请启用CSS源映射后不要将其关闭。) 3)单击“常规”选项卡正下方左侧面板上的“工作区”选项卡。 4)通过单击添加文件夹按钮添加源代码文件夹(关闭框)。 5)进入Sources选项卡,找到您的scss文件。 现在,您可以进行更改并按ctrl + s,它将在您的style.scss上自动更改。 回答2 从Chrome 75开始,这是打开CSS源地图的方法。 打开浏览器的开发人员工具(Ctrl + Shift + I)。 打开右上角的下拉菜单,然后单击“设置”。 查找显示“启用CSS源映射”的复选框,然后将其打开。
  • 如何在React Native for Production中添加源地图?(How to add sourcemap in React Native for Production?)
    问题 应用崩溃时,我收到如下错误日志: 致命异常:com.facebook.react.modules.core.JavascriptException:onSelect index.android.bundle:20:7148 onPress index.android.bundle:20:2435 但这对我排除麻烦不是真的有帮助。 我如何启用源地图,以便能够找出问题所在? UPDATE 2018 https://docs.expo.io/versions/latest/guides/using-sentry.html看起来很有希望! 回答1 对于源映射,这是我的处理方法: 在用于生产构建的bundle命令中,我告诉它生成源映射: iOS: react-native bundle --platform ios --entry-file index.ios.js --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios --sourcemap-output ./sourcemap.js Android-我必须实际修改android / app / react.gradle文件,以获取在发布时生成的源地图。 可能有一种更简单的方法,但基本上
  • Spring Cloud Kubernetes 中文文档
    本参考指南介绍了如何使用Spring Cloud Kubernetes。 1.为什么需要Spring Cloud Kubernetes? Spring Cloud Kubernetes提供了使用Kubernetes本机服务的Spring Cloud通用接口实现。该存储库中提供的项目的主要目的是促进Kubernetes中运行的Spring Cloud和Spring Boot应用程序的集成。 2.首发 入门程序是方便的依赖项描述符,您可以在应用程序中包含它们。包括一个启动器以获取功能集的依赖关系和Spring Boot自动配置。 起动机 特征 org.springframework.cloud spring-cloud-starter-kubernetes 将服务名称解析为Kubernetes Services的Discovery Client实现。 org.springframework.cloud spring-cloud-starter-kubernetes-config 从Kubernetes ConfigMap和Secrets加载应用程序属性 。 ConfigMap或Secret更改时,重新加载应用程序属性。 org.springframework.cloud spring-cloud-starter-kubernetes-ribbon