web安全检查_如何利用现代Web检查器的功能

web安全检查

by Craig Fitzpatrick

克雷格·菲茨帕特里克(Craig Fitzpatrick)

如何利用现代Web检查器的功能 (How to leverage the power of the modern Web Inspector)

The little, handy beast (aka the Web Inspector) has certainly come a long way since the days of “view source”!

自“查看源代码”时代以来，这种小巧，方便的野兽(又名Web检查器)已经走了很长一段路！

For those of you who are too young to remember — back in the prehistoric days of website development, the “view source” command simply opened up the HTML of a page in Windows Notepad. Wasn’t great.

对于那些还不记得的年轻人-在网站开发的史前时代中，“查看源代码”命令只是在Windows记事本中打开页面HTML。 不好

Fast forward to today, we’ve got…

快进到今天，我们已经…

…modifiable CSS rules with color pickers built in…

…带有内置颜色选择器的可修改CSS规则…

…the ability to nudge pixel values with your keyboard, causing real-time movement of your content…

…利用键盘微调像素值的能力，导致内容的实时移动…

…and the greatest invention of them all: “look-ahead”, which auto-completes CSS names and values as you type. This saves you hours of debugging time caused by your own horrible spelling:

…还有其中最伟大的发明：“预读”，当您键入时，它会自动完成CSS名称和值。 这可以节省您因自己的可怕拼写而导致的调试时间：

Many developers haven’t even discovered all the little bits of amazement built into most Web Inspectors.

许多开发人员甚至都没有发现大多数Web Inspector中内置的所有惊奇功能。

For example, did you know that you can construct an entire HTML page in the Inspector?

例如， 您知道您可以在Inspector中构造整个HTML页面吗？

Just open a new tab and Inspector (you’ll probably see a Google search page or something as your default) and start deleting nodes right out of the DOM inspector. Once you’re down to just the HTML node, right click and choose EDIT AS HTML.

只需打开一个新标签和Inspector(您可能会看到一个Google搜索页或其他默认设置)，然后就开始从DOM检查器中删除节点。 转到HTML节点后，右键单击并选择EDIT AS HTML。

Build your page from scratch with an automatic, real-time preview of your work in the browser frame above! You can even drag and drop HTML nodes inside the Inspector to move things around.

在上面的浏览器框架中使用工作的自动实时预览从头开始构建页面！ 您甚至可以在Inspector中拖放HTML节点来移动内容。

Don’t even get me started on how amazing the JavaScript console is for inspecting memory, walking up and down the stack, and more.

甚至不让我开始了解JavaScript控制台在检查内存，在堆栈上走来走去等等方面有多么出色。

It’s a great day to be a web developer!

成为网络开发人员真是美好的一天！

但 (But)

But there’s just one tiny hiccup. Saving your work has only recently been made available, and it’s a little bit clunky… You have to:

但是只有一个小小的打ic。 保存工作直到最近才可用，而且有点笨拙 ……您必须：

• open up the navigator and select overrides
  打开导航器并选择替代
• enable local overrides
  启用本地替代
• right-click on the CSS file and save for overrides
  右键单击CSS文件并保存以替代

Sure… There is some pretty powerful tech here, but how do you quickly get your changes back to your production site? Ugh. So close to perfection!

当然……这里有一些非常强大的技术，但是您如何快速将所做的更改返回到生产现场？ 啊。 如此接近完美！

页面云 (PageCloud)

When I was writing the first version of PageCloud, this was one of the things on my mind.

当我编写第一个版本的PageCloud时 ，这就是我想到的事情之一。

Even though PageCloud is a visual website builder that helps non-techies build web pages, I thought: the DOM inspector is such a powerful tool, wouldn’t it be great if you could simply make some changes and immediately have them sent up into the cloud?

即使PageCloud是可以帮助非技术人员构建网页的可视化网站构建器，我还是认为：DOM检查器是如此强大的工具，如果您可以简单地进行一些更改并立即将其发送到云？

And so I went on a mission to give developers the ability to use the Web Inspector to edit a production site.

因此，我承担了使开发人员能够使用Web Inspector编辑生产站点的任务。

However, the only way to accomplish this was to take a step back and rethink how web pages are built, managed, and served.

但是，完成此操作的唯一方法是退后一步，重新考虑如何构建，管理和提供网页。

There were a whole bunch of technical challenges in the way, like app servers, templates, nesting, databases, caches…

方式上存在很多技术挑战，例如应用服务器，模板，嵌套，数据库，缓存...

So I decided to take a page out of the desktop publishing playbook. The idea was simple: you launch an app to be able to read, edit, and create documents. Once you hit Save, all your changes stick.

因此，我决定从桌面出版手册中删除一页。 这个想法很简单：您启动一个应用程序即可阅读，编辑和创建文档。 点击保存后，所有更改都会保留下来。

So I asked myself:

所以我问自己：

What if we simply considered web pages as documents?

如果我们仅将网页视为文档怎么办？

I won’t bore you with the struggles of making this actually work (and the several bottles of wine that helped soothe the pain), but this initial idea was the foundation for everything PageCloud is today. And, so far, we are the only ones to do it.

我不会为使该方法真正起作用而感到烦恼(以及帮助缓解这种痛苦的几瓶葡萄酒)，但是这个最初的想法是PageCloud如今的一切的基础。 而且，到目前为止，我们是唯一这样做的人。

Building on this concept, we were able let users interact with the web in the same way you would with your desktop apps: such as copy/pasting from the clipboard, layering, resizing, and moving objects freely on the page.

在此概念的基础上，我们使用户能够以与桌面应用程序相同的方式与Web交互：例如从剪贴板复制/粘贴，分层，调整大小以及在页面上自由移动对象。

This same idea allowed us to integrate with the Web Inspector, enabling users to tweak anything, hit Save, and be done.

同样的想法使我们能够与Web Inspector集成，使用户可以调整任何内容，单击“保存”并完成操作。

Here’s a quick example:

这是一个简单的例子：

Leveraging all the beauty of the modern Web Inspector, you can: edit the HTML, CSS, and create links to external CSS and JS. You can even run commands in the JavaScript console to modify the DOM!

利用现代Web Inspector的所有美感，您可以：编辑HTML，CSS并创建指向外部CSS和JS的链接。 您甚至可以在JavaScript控制台中运行命令来修改DOM！

Any means by which you can modify that DOM is fair game. When you “SAVE”, all your changes are persisted and sent back up to the cloud — because your page is a document, after all!

您可以通过任何方式修改DOM都是公平的游戏。 当您“保存”时，所有更改都将保留并发送回云中-因为毕竟您的页面是一个文档！

Thanks to the magic of the web inspector, you can even copy nodes from one browser window and paste them into the DOM of another page.

借助Web检查器的魔力，您甚至可以从一个浏览器窗口复制节点并将其粘贴到另一页的DOM中。

Yes, we are ambitious. But we believe that this new way of thinking will allow PageCloud to become the first-ever tool that fulfils the needs of the visual designer, while maintaining unrestricted access for developers.

是的，我们雄心勃勃。 但是我们相信，这种新的思维方式将使PageCloud成为有史以来第一个满足视觉设计人员需求的工具，同时为开发人员提供不受限制的访问权限。

Maybe one day in the not-so-distant future, “Inspect” will be replaced by a user-friendly interface, and join “view source” in the ranks of the outdated. That is, if PageCloud has anything to do with it!

也许在不远的将来的某一天，“检查”将被用户友好的界面取代，并将“查看源代码”加入到过时的行列中。 也就是说，如果PageCloud与它有任何关系！

翻译自: https://www.freecodecamp.org/news/how-to-leverage-the-power-of-the-modern-web-inspector-b94dd85e1917/

web安全检查