DevTools: Option to Copy Styled console output for rich text editors
Reported by
moni...@gmail.com,
Dec 13 2016
|
||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.98 Safari/537.36 Steps to reproduce the problem: Feature Request: For the purpose of nicer styling in communication(IM, mail, docs), it'd be awesome to be able to copy console output as styled text (with background, color, font, etc). What is the expected behavior? I would see it accessible from contextual menu, without need to have a pre-selected range of text - just hover and context-click. Of course it should be decided what to copy when it comes to expandable pieces of info (such as error stack or objects) - my vote would be to copy exactly as currently displayed - items that are collapsed show as one-liners. What went wrong? Even more awesome would be some kind of integration with Slack, to automatically create snippets for sending, but that's probably a candidate for a DevTools plugin. Having styled text would be needed anyway. Did this work before? No Chrome version: 54.0.2840.98 Channel: n/a OS Version: OS X 10.11.6 Flash Version: Shockwave Flash 24.0 r0
,
Dec 14 2016
Thanks for the report. Considering this feature request and marking as Untriaged. Requesting Dev team to check the request and update accordingly.
,
Dec 16 2016
,
Dec 16 2016
BTW, I also found out it is actually impossible to copy a console log output of an object. Selecting Copy from context menu seems to copy the word "Object" only, highlighting a text range is impossible as the range disappears shortly after the mouseup. This is at least the state of things on Mac. Maybe you could look into the Copy feature and fix the above...
,
Dec 16 2016
The bug you mentioned in #4 with being unable to select + copy/paste is being tracked in another issue. I have an idea of a fix for that: crbug.com/674739 To the original point of the issue, I'm not exactly sure how feasible it will be to paste styled content into Slack. After reading Slack's docs, it looks like they support a simple markdown language with bold, italic, code, but not things like font, color, background color unfortunately. https://api.slack.com/docs/message-formatting https://get.slack.help/hc/en-us/articles/202288908-How-can-I-add-formatting-to-my-messages- Perhaps there's some documentation that I've missed? If you know of a way, please let us know! Otherwise, I don't see how DevTools can prepare content that Slack will style. Still, a DevTools extension for Slack integration would be neat! I think there's opportunity for better ways to share console log data.
,
Dec 16 2016
Frankly, I don't know of any method to integrate with Slack, although I can ask around. However, I wouldn't like the Slack issue to be the main focus for this thicket. I think there should be a way to copy styled content that could then be recognized upon paste in rich text editors, such as Word or Google mail (is it HTML data behind the scenes?). I sometimes have a need to quote a console error in documentation/manual docs. I thought it'd be easier to copy/drag'n'drop rather than paste in screenshots. If there's too much fuss trying to provide support for this feature in DevTools then feel free to close the ticket.
,
Dec 16 2016
Ah, okay. As I understand it, you need to provide some preview of a console error in a document, and today's copy/paste only writes plain text without the rich styling from cases like these:
1) Formatters, e.g. console.log('%cfoo', 'color: blue')
2) The red styled text in errors, e.g. console.error('foo')
The first case should be possible since the color and other styles are directly set on the elements shown. The second case, however, will not be straightforward since the red color comes from a stylesheet much higher up.
If there's desire for these use cases, let's keep this open. Thanks for the feature request!
,
Dec 16 2016
Well, the console output is not alwyas authored by me in js. Often times it's HTTP errors, like OPTIONS preflight or 40x, sometimes it's an error or warning from third-party libraries, so in practice this is not alwyas possible to assume that colors have been applied to text on a certain internal level.
,
Nov 18 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/80f526543bbe0692624591c0f9ef968fec1d498f commit 80f526543bbe0692624591c0f9ef968fec1d498f Author: Erik Luo <luoe@chromium.org> Date: Sat Nov 18 03:37:31 2017 DevTools: allow copying visible text with styles in console Console's custom copy handler tries to determine the selected text on its own. In some cases, the browser's default copy handler offers much better behavior: - Include styles and colors - Include table indentation that can be pasted into spreadsheet editors - Account for text selections across shadow boundaries Bug: 673746 , 697149 , 649828 Change-Id: I4b5e3a225234e28fe84197a73f655af9c4c9f418 Reviewed-on: https://chromium-review.googlesource.com/773462 Commit-Queue: Erik Luo <luoe@chromium.org> Reviewed-by: Dmitry Gozman <dgozman@chromium.org> Cr-Commit-Position: refs/heads/master@{#517691} [modify] https://crrev.com/80f526543bbe0692624591c0f9ef968fec1d498f/third_party/WebKit/Source/devtools/front_end/console/ConsoleView.js [modify] https://crrev.com/80f526543bbe0692624591c0f9ef968fec1d498f/third_party/WebKit/Source/devtools/front_end/console/ConsoleViewport.js
,
Nov 18 2017
To update this bug: we can offer a partial solution for now, in which users "Copy visible styled text" from the right-click context menu to achieve this functionality. Performing this right click action should allow you to copy text with color, background color, and font from the console. While a right click option is not as ideal as I'd like, I'm marking this as fixed, since there are no plans in which we could support this without incurring significant complexity. |
||||||
►
Sign in to add a comment |
||||||
Comment 1 by tkent@chromium.org
, Dec 13 2016