<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="293290" data-post-id="293290">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="tmbb" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  tmbb
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="mayel" data-post="20" data-topic="56792">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/mayel/48/26431_2.png" class="avatar"> mayel:</div>
<blockquote>
<p>I played with the library and defining this macro accomplished that, used by calling it by putting <code>{...pry()}</code> in an element’s HTML attributes (no need for two macros in this case):</p>
</blockquote>
</aside>
<p>Yes, if you want to link to the place where the HTML element appears then it’s actually easier than waht I was doing! I decided to link to the palce where the component is called becuase my app was using components defined in a complex use macro froma nother package, so the line numbers were kinda useless (they would point to a line in an “empty module” that only contained the <code>use</code> macro).</p>
<aside class="quote no-group" data-username="mayel" data-post="20" data-topic="56792">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/mayel/48/26431_2.png" class="avatar"> mayel:</div>
<blockquote>
<p>IMO the line where the HTML element appears seems more useful, though having the option of both may be good (if using a context menu or something).</p>
</blockquote>
</aside>
<p>If the Source Inspector can provide a context menu with several source locations (using JS, probably), then we could expose a “stack trace” and the user could choose where to go: to the HTML element, to the component call, or even to the livevew <code>mount()</code> callback. The tricky thing would be how to generate the stack trace at the right level of abstraction. We probably don«t want a real stack trace, and instead we want a “simplified” stack trace that exposes the component hierarchy and maybe the controller function or the liveview <code>mount()</code> callback.</p>
<aside class="quote group-Phoenix-Core-Team" data-username="chrismccord" data-post="21" data-topic="56792" data-full="true">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/chrismccord/48/24233_2.png" class="avatar"> chrismccord:</div>
<blockquote>
<p>Nice work! The goal in the linked issue is to add this to the HTML engine and have it inject whatever is needed to do this kind of thing. If you’d like to get involved with that issue, please let me know!</p>
</blockquote>
</aside>
<p>I would be interested in this, but I’m not sure how much time I’d have to work on it. The HTML engine seems complex (although the changes we’d require would probably be very simple once one understands the engine).</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="293290" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/made-a-source-code-inspector-useful-in-big-projects-or-large-teams/56792/22">Post #21</a>
	                </div>
	            </div>
              <div id="likers-container-293290" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="293290"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #21"></div>
  </section>
</div>
    <div class="postbit" id="293494" data-post-id="293494">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="tmbb" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  tmbb
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Done: <a href="https://github.com/phoenixframework/phoenix_live_view/pull/2719" class="inline-onebox" rel="noopener nofollow ugc">Source code inspector by tmbb · Pull Request #2719 · phoenixframework/phoenix_live_view · GitHub</a></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="293494" data-batch-url="/posts/batch_likers">
                        5
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/made-a-source-code-inspector-useful-in-big-projects-or-large-teams/56792/23">Post #22</a>
	                </div>
	            </div>
              <div id="likers-container-293494" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="293494"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #22"></div>
  </section>
</div>
    <div class="postbit" id="293578" data-post-id="293578">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="derpycoder" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/derpycoder/120/31388_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  derpycoder
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><a class="mention" href="/u/tmbb" rel="nofollow">@tmbb</a>, I saw your comment on the PR.</p>
<p>I’m on vacation, till 16th of this month.</p>
<p>Once I’m back, I’ll see how I can make the required changes you asked for.</p>
<p>It’s exciting to finally see the changes being added to Phoenix itself. <img src="https://forum.elixirforum.com/images/emoji/apple/face_holding_back_tears.png?v=15" title=":face_holding_back_tears:" class="emoji" alt=":face_holding_back_tears:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="293578" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/made-a-source-code-inspector-useful-in-big-projects-or-large-teams/56792/24">Post #23</a>
	                </div>
	            </div>
              <div id="likers-container-293578" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="293578"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #23"></div>
  </section>
</div>
    <div class="postbit" id="295203" data-post-id="295203">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="derpycoder" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/derpycoder/120/31388_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  derpycoder
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hey,</p>
<p>I am back, however, I have no clue how to work with Phoenix Live View.</p>
<p>How do I contribute to the project?</p>
<p><code>iex -S mix</code>?</p>
<p>But how to see the UI-related changes? I couldn’t find a <code>CONTRIBUTING.md</code>.</p>
<p><a class="mention" href="/u/tmbb" rel="nofollow">@tmbb</a> Little help. <img src="https://forum.elixirforum.com/images/emoji/apple/upside_down_face.png?v=15" title=":upside_down_face:" class="emoji" alt=":upside_down_face:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="295203" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/made-a-source-code-inspector-useful-in-big-projects-or-large-teams/56792/25">Post #24</a>
	                </div>
	            </div>
              <div id="likers-container-295203" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="295203"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #24"></div>
  </section>
</div>
    <div class="postbit" id="295270" data-post-id="295270">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="tmbb" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  tmbb
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<blockquote>
<p>I am back, however, I have no clue how to work with Phoenix Live View.</p>
</blockquote>
<p>Well, Phoenix Live View is developped like any other Elixir package. I’m not sure how the JS part works exactly, but I assume Phoenix Live View bundles its JS assets somehow. If thereis any JS you need to add, it should be added there. Regarding CSS, I’ll live that up to you, but it’s probably best to bundle the CSS somehow inside the JS.</p>
<aside class="quote no-group" data-username="derpycoder" data-post="25" data-topic="56792">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/derpycoder/48/31388_2.png" class="avatar"> derpycoder:</div>
<blockquote>
<p>But how to see the UI-related changes? I couldn’t find a <code>CONTRIBUTING.md</code>.</p>
</blockquote>
</aside>
<p>You need to create your own project and import your local version of LiveView to preview the changes locally.</p>
<p>Note that Phoenix liveview probably doesn’t ship with any CSS, and IMO all CSS and JS should work independently of the CSS and JS generated by the default phoenix generators, so all CSS should be self-contained (ideally with some possibilites for configuration which could be passed into the JS by a  tag or something, because we need to make sure that the new outlines don’t blend into the colors of the user’s HTML)</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="295270" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/made-a-source-code-inspector-useful-in-big-projects-or-large-teams/56792/26">Post #25</a>
	                </div>
	            </div>
              <div id="likers-container-295270" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="295270"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #25"></div>
  </section>
</div>
    <div class="postbit" id="301623" data-post-id="301623">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="derpycoder" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/derpycoder/120/31388_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  derpycoder
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Chris McCord showcased this functionality at Elixir Conf.</p>
<p>Yay, we don’t have to jump through so many hoops to be able find the source code!</p>
<p>            <img class="youtube-thumbnail onebox" style="display: none;" src="https://img.youtube.com/vi/Ckgl9KO4E4M/maxresdefault.jpg" width="690" height="388">
            <iframe src="https://www.youtube.com/embed/Ckgl9KO4E4M?feature=oembed&amp;wmode=opaque&amp;start=1740" width="480" height="360" frameborder="0" allowfullscreen="" class="youtube-onebox" seamless="seamless" sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation"></iframe>
</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="301623" data-batch-url="/posts/batch_likers">
                        5
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/made-a-source-code-inspector-useful-in-big-projects-or-large-teams/56792/27">Post #26</a>
	                </div>
	            </div>
              <div id="likers-container-301623" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="301623"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #26"></div>
  </section>
</div>
    <div class="postbit" id="315772" data-post-id="315772">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="tmbb" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  tmbb
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>This is just a demo and AFAIK not available in phoenix master, right? At least I can’t find anything in the phoenix source code that allows you to click an HTML element and open your editor.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="315772" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/made-a-source-code-inspector-useful-in-big-projects-or-large-teams/56792/28">Post #27</a>
	                </div>
	            </div>
              <div id="likers-container-315772" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="315772"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>