在Firefox中轻松查看包含文件的源

In the web development world, most of the design isn’t in the page HTML anymore, it’s been moved to the included CSS and Javascript files. The problem is that when you want to take a peek into the code there’s not a really simple way to view those CSS/JS files.

在Web开发世界中,大多数设计不再位于HTML页面中,而是已移至随附CSS和Javascript文件中。 问题是,当您想窥探代码时,没有一种真正简单的方法来查看这些CSS / JS文件。

There’s an extension called JSView that will let you easily view the source of included files a couple of different ways.

有一个名为JSView的扩展,可以通过两种不同的方式轻松查看包含文件的源。

Default Installation Usage

默认安装用法

Once you’ve installed the extension, you’ll see a new option called “View Page Source – JSView”. It will take you to the same screen as the regular View Page Source dialog will…

安装扩展程序后,您将看到一个名为“查看页面源– JSView”的新选项。 它将带您到与常规“查看页面源”对话框相同的屏幕…

在Firefox中轻松查看包含文件的源

Now when you are in the View Source screen, the View menu will contain extra menu items that let you quickly access the included files.

现在,当您在“查看源代码”屏幕中时,“查看”菜单将包含其他菜单项,可让您快速访问包含的文件。

在Firefox中轻松查看包含文件的源

Quick Access Context Menu

快速访问上下文菜单

Open up the JSView Options screen from the Tools menu, and uncheck the “Disable jsview popup menus” item to add the extra menus to the default right-click menu.

从“工具”菜单中打开“ JSView选项”屏幕,然后取消选中“禁用jsview弹出菜单”项,以将其他菜单添加到默认的右键单击菜单中。

在Firefox中轻松查看包含文件的源

You’ll also want to choose “Disable View Page Source – JSView” to disable the redundant JSView item on the menu. Now when you right-click in any page, you can quickly get access to the source.

您还需要选择“禁用视图页面源– JSView”以禁用菜单上的冗余JSView项目。 现在,在任何页面上单击鼠标右键时,您都可以快速访问源。

在Firefox中轻松查看包含文件的源

Note that if you want the most minimal experience, you could choose to disable all the options and simply access the functions from the view source window.

请注意,如果您希望获得最小的使用体验,则可以选择禁用所有选项,而仅从视图源窗口访问功能。

Other Options

其他选择

You can also choose whether to open in a new window…

您还可以选择是否在新窗口中打开…

在Firefox中轻松查看包含文件的源

Or whether to use an external editor…

还是是否使用外部编辑器…

在Firefox中轻松查看包含文件的源

This is a really useful extension that has now become part of my web development toolkit.

这是一个非常有用的扩展,现已成为我的Web开发工具包的一部分

Download JSView Extension from Mozilla Add-ons

从Mozilla附加组件下载JSView扩展

翻译自: https://www.howtogeek.com/howto/internet/firefox/easily-view-source-of-included-files-in-firefox/