同步操作将从 mirrors_Adobe-CEP/Getting-Started-guides 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
This guide will walk you through the necessary steps to debug client-side code in a CEP extension.
.debug
File.debug
FileThis guide will assume that you have completed all steps in the Getting Started with CEP Extensions Guide.
First, set the following Adobe preference to prevent your host application (Photoshop, InDesign, etc.) from throwing alerts about unsigned extensions. The HTML Extension Cookbook section on Debugging Unsigned Extensions explains this process:
Windows: Open regedit > HKEY_CURRENT_USER/Software/Adobe/CSXS.8, then add a new entry
PlayerDebugMode
of type “string
” with the value of “1
”.
Mac: In the Terminal, type:
defaults write com.adobe.CSXS.8 PlayerDebugMode 1
On Windows, Regedit is located in (C:\Windows\regedit). You can access it using CMD, too.
On macOS, Terminal is located in (Applications > Utilities > Terminal).
.debug
FileNext, create a .debug
file for your extension. The .debug
file needs to be at the top level of your extension’s folder.
The .debug
file must be a hidden file in order to work. The .
at the front of the file name will make it hidden. The easiest way to create this file is to use the code editing tool of your choice (like Sublime Text or Brackets) to create a new file named .debug
.
To see your hidden files on Mac, as of MacOS Sierra, you can use the Command Shift +
shortcut.
To see your hidden files on Windows 10, you can expand your view options in a File Explorer window and check the Hidden Files box.
How to see your hidden files in Windows 10.
.debug
FileThe .debug
file must include the following elements (see notes #1-2 below):
<ExtensionList>
<!-- 1 -->
<Extension Id="com.example.helloworld">
<HostList>
<!-- 2 -->
<Host Name="PHXS" Port="8088"/>
<Host Name="PHSP" Port="8088"/>
</HostList>
</Extension>
</ExtensionList>
The Extension ID in this .debug
file above must match the Extenstion ID in your manifest.xml
file (see our Getting Started Guide for more information).
List the Host IDs for each app your extension supports, with a corresponding port of your choosing for debugging. In this example, we've listed the Host IDs for Photoshop. The full list of host application ports is available in the CEP Cookbook.
Open Chrome and go to http://localhost:8088/
or whichever port you set in your .debug
file in the previous section.
CEF Remote Debugging in Chrome
If your panel is working, you’ll see the name of your extension as a link you can click on, as seen in the image above. The link will take you to the JavaScript Console within Chromium DevTools. The JavaScript Console is where, among other things, you will see your extension's log and error output.
The JavaScript Console in Chrome
In the example below, the console.log()
message is “I can’t believe you clicked!”. The message originates from the <script>
element in the index.html
file:
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<!-- Add a button labeled “Click this!” -->
<button id="myButton">Click this!</button>
<script type="text/javascript">
/* Add a click handler to the button */
document.getElementById('myButton')
.addEventListener('click', function() {
/* When the button is clicked, output a string to the JavaScript Console */
console.log("I can't believe you clicked!");
});
</script>
</body>
</html>
The change in the Set the Debug Mode section is invisible if performed correctly. Otherwise, you’ll get the following error about unsigned extensions:
The “Your Panel Name” extension could not be loaded because it was not properly signed.
Don’t worry about signing your extensions until you’re ready to distribute to users.
If you’ve set the debug mode and are still getting the error above, try killing the cfprefsd process, or check out this thread about troubleshooting debug mode in the Adobe forums.
If your debug console in Chrome appears blank, check the contents of your .debug
file one more time:
.debug
file match what's in manifest.xml
?localhost
on the same port that you have indicated in your debug console?If you are still having trouble, try following the steps on this Adobe forum thread.
Now that you've seen the basics, check out these guides and samples that walk you through some common intermediate and advanced topics in building CEP extensions:
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。